본문 바로가기

개발40

HTML 핵심 요소 정리 태그 : Division을 의미하며 특별한 의미가 없는 구분을 위한 요소로 블록(상자) 요소이다. 태그 : Heading을 의미하며 제목을 의미하는 요소로 블록(상자) 요소이다. h1 ~ h6까지 6개의 요소가 존재하고 숫자가 작을수록 더 중요한 제목을 정의한다. 태그 : Paragraph를 의미하며 문장을 의미하는 요소로 블록(상자) 요소이다. div를 사용해도 되지만 p태그를 사용하면 그 내용을 확인하지 않아도 p태그로 묶여있는 내용은 어떤 문장이구나를 알 수 있다. 태그 : 이미지를 삽입하는 요소로 인라인(글자) 요소이다. 삽입할 이미지의 경로와 삽입할 이미지의 이름을 명시해야 한다. => 이처럼 반드시 명시해야 할 속성을 필수 속성 이라고 한다. 이미지의 이름을 명시하는 이유는 이미지가 출력되지 .. 2023. 1. 2.

글자와 상자 우리가 보고있는 웹사이트는 이미지를 제외하고는 글자와 상자로 이루어져 있다고 볼 수 있다. 글자를 만드는 요소들은 인라인(inline)요소라고 하고, 상자를 만들기 위한 요소들은 블록(Block)요소라고 한다. 글자를 취급하는 인라인 요소, 레이아웃을 취급하는 블록 요소 라고 기억하면 될 듯 하다. 1. 인라인 요소 인라인 요소의 대표적인 예로는 태그가 있다. 인라인 요소는 요소 자체가 하나의 글자로 인식이 되며 줄바꿈은 띄워쓰기로 인식이 된다. 그렇기 때문에 줄바꿈을 하지 않고 HelloWorld이라고 작성하게 되면 두 개를 하나의 글자로 인식해서 띄워쓰기 없이 HelloWorld 라고 출력한다. 글자 요소 즉, 인라인 요소는 콘텐츠의 크기만큼 자동으로 줄어드는 특성을 가지고 있다. 이러한 특성으로 인.. 2023. 1. 2.

빈 태그(Empty tag) 우리가 지금껏 살펴본 태그들은 열리는 태그와 닫히는 태그가 세트로 존재를 하고, 그 세트를 하나의 요소라고 한다고 살펴봤다. 하지만 meta 태그나 img 태그를 보면 열리는 태그만 존재하고 닫히는 태그는 존재하지 않는데, 내용(Content)이 없다고 해서 빈(Empty) 태그라고 부른다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Document Colored by Color Scripter cs 예를 들면 위와 같은 html 코드에서 태그나 태그를 보면 태그와 다르게 태그가 하나만 존재한다. 빈 태그를 작성하는 방식은 크게 두가지로 나뉘는데, 하나는 열리는 태그만 작성하는 방법이고 다른 하나는 열리는 태그 맨 뒤에 슬래시 기호 ( / ) 를 붙이는 방법이다. 두 번째 방법은 닫힌 태.. 2023. 1. 2.

부모요소와 자식요소 코드를 작성하다 보면 태그 안에 또 다른 태그를 중첩적으로 사용하는 경우가 발생한다. 이러한 경우에 각각의 요소들을 어떻게 지칭하는지 알아보자. 기본적으로 태그 안에 다른 태그를 넣게 되면 들여쓰기를 통해 요소들을 구분해준다. 일렬로 작성해도 프로그램 동작에는 문제가 없지만, 코드를 이쁘게 작성하는 이유는 코드를 컴퓨터가 알아볼 수 있다고 거기서 끝이 아니라 나와 협업하는 사람들도 나의 코드를 읽기때문에 코드를 읽기좋게 작성하는 습관을 들여야한다. 1. 부모요소 나를 기준으로해서 나를 감싸고 있는 바로 윗단계의 요소를 '부모 요소' 라고 부른다. 2. 상위(조상) 요소 부모 요소를 포함하여 나를 감싸고 있는 모든 요소를 통틀어서 '상위 요소' 또는 '조상 요소' 라고 부른다. 3. 자식 요소 나를 기준으.. 2023. 1. 2.

이전 1 2 3 4 5 다음

티스토리툴바