Front-End22 HTML 태그 - 서식에 사용되는 태그들 html에서 코딩을 작성할 때 아무리 엔터나 스페이스를 눌러서 공간을 띄어도 실제 보이는 화면에서는 줄 바꿈이 일어나지 않는다. 따라서 서식을 꾸미는 태그들이 따로 존재한다. 서식은 문서를 꾸미는 형식을 말하는데, 글자의 크기, 글자의 색, 글자의 정렬을 조절한다. 서식에 사용되는 태그들 제목 h1 제목 h2 제목 h3 제목 h4 제목 h5 제목 h6 제목을 나타내는 태그 태그 안에 글씨를 굵게 보이는 속성이 포함되어 있다. 숫자가 작을수록 화면에 크게 나타난다. 한 줄 띄어쓰기 태그, 닫는 태그가 없다. 가로줄 태그, 닫는 태그가 없다. 문단 태그로, 문단 사이에 줄 바꿈이 일어난다. 굵은 텍스트 중요 텍스트, 매우 중요한 텍스트를 정의 기울임 꼴 텍스트 기울임꼴 텍스트, 강조 텍스트를 정의 표시된 텍.. 2023. 2. 6. HTML 요소 - inline-element, block-element HTML의 모든 요소에는 요소 유형에 따라 기본 표시 값이 있다. 표시 값에는 inline-element, block-element 두 가지가 있다. 이 표시값에 따라서 사용할 수 있는 속성 태그가 달라진다. inline-element 인라인 요소는 새 줄에서 시작하지 않는다. 인라인 요소는 필요한 만큼의 너비만 차지한다. 대표적으로 사용되는 요소는 단락의 내부에서 사용되는 요소 요소는 텍스트의 일부 또는 문서의 일부를 표시하는 데 사용 참고: 인라인 요소는 블록 수준 요소를 포함할 수 없다! 예시> 공간크기로 보는 인라인요소 span 태그는 내부적인 요소로 Hello World 필요한 너비만큼만 작동한다. span 요소는 인라인 요소로, 새 선에서 시작하지 않고 필요한 만큼의 너비만 차지한다.(빨간박스.. 2023. 2. 5. CSS 결합자(combinators)란? 초보자들은 흔히 특정태그를 선택하기 위해 태그 하나하나에 다른 클래스를 달아주곤 하는데, 작은 프로젝트에서나 상관없지만 큰 프로젝트일수록 비효율적이다. 특히, 협업을 하는 경우에는 더욱 더 비효율적. 태그 하나하나에 클래스를 두면 1. 만든 클래스 이름을 다 기억하지도 못할뿐더러 2. 이 클래스가 도대체 무슨 효과를 주는지 하나하나 짝지으며 찾아다녀야 한다. 그럼 어떻게 해야 할까? 결합자(combinators)를 활용해 코드를 짜는 것이다. 결합자(Combinator)는 선택자를 여러 개 결합하여 세밀하게 찾을 수 있게 한다. 결합자는 크게 네 가지로 나눌 수 있다. 결합자에 대해서 알려면 HTML의 구조에 대해서 알아야 한다. HTML의 구조 "어떤 요소 안에 어떤 요소가 있느냐"를 이해하는 것이 가.. 2023. 2. 4. CSS에 대한 보충 설명 1. CSS를 사용하는 이유 태그 내에 style속성을 사용하여 서식을 지정하는 것은 사실 좋은 방법이 아니다. 홈페이지들은 웹문서하나가 몇천 줄로 이루어져 있고, 이를 모두 일일히 변경한다는 건 사실상 불가능하다. 한번에 일괄적으로 변경을 하기 위해서 css라는 기능이 생겨난 것 css를 사용하면 한 번의 클릭만으로 컴퓨터나 핸드폰의 테마를 변경할 수 있듯이 웹문서의 서식을 일괄적으로 지정할 수 있게 된다. 2. 아이디를 하나만 지정하는 이유 사실 HTML과 CSS에서는 하나의 웹페이지에 같은 아이디를 여러 번 사용해도 별문제 없이 동작하긴 한다. 하지만 이렇게 중복된 아이디를 가지고 자바스크립트작업을 하게 되면 오류가 발생하기 때문에, 하나의 id는 한 번만 사용하는 습관을 들여야 한다. 2023. 2. 3. HTML 태그 보충 설명 1. title 태그 출력 위치 KASSY의 HTML 기초 결과물> 2. meta 태그 사용이유 쓰지 않으면 한글이 제대로 나오지 않는 경우가 있다. 메모장에서 html 문서를 작성할 때는 저장시 인코딩으로 UTF-8을 선택해 주면 된다. 3. 닫아주지 않아도 되는 태그 등 4. html의 문법 오류 허용 문법오류에 관대하다. 태그를 깜빡하고 닫지 않거나, 오타가 있어도 웹 브라우저가 임의로 해석해 출력해 준다. 5. 대소문자를 구별하지 않는다. 표준은 소문자를 쓰는 것을 권장한다. HTML = html 6. 주석을 쓰는 이유 코드를 읽는 사람을 위해서 설명을 돕기 위해서 쓴다. 긴 코드의 경우나 여러 명과 같이 작업을 할 때 알아 보기 쉽게 할 수 있다. NotePad 에디터 사용시 주석 단축키 Ctr.. 2023. 2. 1. HTML 태그 - img, a href 1. 속성 src="이미지 파일 주소 또는 이미지 파일 이름.확장자" 컴퓨터에 저장된 이미지를 사용하려면 html 만든 폴더와 같은 폴더에 이미지 파일이 있어야 인식하고 파일을 열 수 있다. 다른 공간에 이미지 파일이 저장되어 있으면 파일이 열리지 않는다. 속성값 title / alt 차이 title: 그림에 마우스를 올렸을 때 그림에 대한 설명을 넣을 수 있다. alt: 이미지를 표시할 수 없는 경우 이미지의 대체 텍스트를 보여준다. alt 속성은 느린 네트워크 환경이나 src 속성값의 오류, 시각 장애인용 스크린 리더의 사용 등 어떤 이유로든 사용자가 이미지를 볼 수 없을 때 이미지 대신 제공할 대체 정보를 제공한다. 개념확실히 알고가기! 1. 이미지, title 태그 2. 이미지, alt 태그 둘 .. 2023. 2. 1. 이전 1 2 3 4 다음
