HTML 태그 썸네일형 리스트형 [웹] HTML/CSS #10 :: <div> 태그와 시맨틱 태그 HTML은 컨텐츠를 담는 통이다. 그리고 통에는 파티션이 나눠져 있어야 내용물을 정리하기 좋다. HTML도 마찬가지다. 웹사이트의 내용은 종종 엄청 많고 복잡해지기도 한다. 그리고 혼자 작업하는 게 아니라 여러 사람들이 함께 작업하거나, 내 작업을 이후 후임자가 유지보수할 수도 있다. 그럴 때 나 같은 태그들이나 태그 안에 한 번에 담겨있으면, 웹사이트의 구조를 파악하기 어려울 것이다. 이걸 도와주는 게 태그다. 는 별 내용이 없다. division의 약자인데, 말 그대로 구간을 나눈 것 뿐이다. 예를 들어 제목과 본문을 구분하고 싶다면 아래 표처럼 구간을 나눌 수 있다. 제목 본문내용본문내용본문내용본문내용본문내용 이렇게 파티션을 나눠두고, 각각 id를 지정해서 의미를 알 수 있게 하면 오랜 시간이 지난.. 더보기 [웹] HTML/CSS #9 :: HTML5 기본 템플릿 class="class1" id="leader1>a class="class1">b class="class1">c class="class2" id="leader2">d class="class2">e class="class2">f 지난 번에 설명 못한 부분이 있다. CSS 선택자 실습할 때 위와 같은 HTML 코드를 사용한 적이 있다. 과 는 순서 없는 리스트와 그 세부 항목을 만드는 태그라고 설명한 적이 있다. 그럼 그 나머지는 무엇일까. 지금부터 알아보겠다. 태그 안의 내용은 삭제하면 위의 코드와 같다. 이게 바로 html의 기본 템플릿이다. 모든 html로 만들어진 웹페이지는 이러한 형식을 갖고 있어야 한다. 그래야 웹 브.. 더보기 [웹] HTML/CSS #8 :: CSS 선택자 사실 7편보다 이걸 먼저 했어야 순서상 효율적이지 않았을까 싶다. 그래도 뭐 선택자 개념 배운 다음에 다시 속성 활용해서 실습하면 된다. 1편부터 쭉 봐왔다면 알겠지만 HTML은 내용을 담는 통이고, CSS는 그 내용이 보여지는 모습을 꾸민다. HTML에 태그를 이용해 각각 요소들을 만들어 구성을 짜면, CSS는 각각의 요소들을 어떤 방식으로 표시하라고 브라우저에게 명령한다. 비유적으로 표현하면, HTML은 레고다. 각각의 태그들은 새하얀 레고블럭이다. 그리고 레고블럭들을 이용해 원하는 모양을 만든다. CSS는 그 새하얀 레고블럭들을 칠하는 것이다. 정확히 말해 HTML과 CSS는 이러한 행동을 하라는 지시를 적은 명세서이다. 실제로 레고를 쌓고 블럭을 칠하는 건 브라우저다. 그럼 CSS에는 브라우저가 .. 더보기 [웹] HTML/CSS #7 :: 실무에 자주 쓰이는 속성 속성들에 대해 좀 더 디테일을 알아볼 차례다. 모든 속성을 다 소개할 수는 없고 실무에서 자주 쓰이는 대표적인 속성들, 꼭 알아야 하는 것들만 알아보겠다. 그 외에는 그 때 그 때 필요할 때, 이 기능이 있으면 좋을 것 같단 생각이 들 때 검색을 활용하면 된다. 레퍼런스를 참고하거나. HTML 요소의 구조도 1. class 속성 a b c 가장 많이 쓰이는 속성 중 하나다. class는 말 그대로 클래스다. HTML 요소들을 일정 클래스로 분류하는 것. a, b, c 학생(요소)는 1반(클래스)으로 지정하고, d, e, f 학생(요소)는 2반(클래스)로 지정한다면 무엇이 편할까. 클래스는 CSS에서 해당 요소들을 선택하기 위해 사용하는 것이다. 즉 CSS에서 클래스를 선택하여 서식을 적용하면, 해당 클래.. 더보기 [웹] HTML/CSS #6 :: 속성이란? HTML 실습정말 쉬운 실습이건 진짜 시작이 반이다네이버로 가자 빠르게 진행하겠다. 속성은 태그를 보조해주는 역할이다. 태그는 사이에 태그 이름이 들어가 있는 단순한 구조다. 여기에 좀 더 많은 기능을 부여해주는 것이 속성이다. CSS를 통해 태그를 보조해주는 경우가 많지만, 디자인보다 '기능'에 가까운 쪽은 HTML 자체 속성을 활용한다. 위의 표 중에서 맨 아래 요소만 가져와보겠다. #에는 네이버의 메인 주소를 치면 된다. 네이버로 가자 위의 줄 전체, 즉 오프닝 태그부터 클로징 태그까지, 다시 말해 부터 까지를 모두 일컬어 HTML 요소(element)라고 부른다. 그리고 파란색으로 색칠한 와 를 앞선 포스팅에서 설명한 것처럼 태그라고 부른다. 그리고 오프닝 태그의 안에 담겨있는 주황색, 저게 속성.. 더보기 [웹] HTML/CSS #5 :: HTML 기본 태그와 속성 지난 번에 실습에서 사용한 태그는 아래와 같다. 이번 포스팅에서는 아래 태그들의 기능과 그 속성에 대해서 알아본다. 물론 추가적으로 몇몇 자주 사용되는 주요 태그와 그 속성에 대해서도 알아볼 것이다. HTML 실습 정말 쉬운 실습 이건 진짜 시작이 반이다 네이버로 가자 1. ~ 태그 위의 태그 중 과 을 보면 도 있음을 생각할 수 있다. 나아가 잘은 모르겠지만 나 , 까지도 있지 않을까 유추할 수 있다. 맞다. 태그는 부터 까지 있다. 그럼 이 태그는 무엇일까. h는 아마 headline의 약자일 것이다. 정확히는 모르겠지만 아마 맞을 거다. 헤드라인, 즉 제목이다. 즉 문서 내에서 제목을 표시해주는 태그다. 그럼 뒤의 숫자는? 크기다. 이 가장 크고 이 가장 작다. 직접 알아보자. 에디터를 켜고 다음 .. 더보기 [웹] HTML/CSS #4 :: HTML 태그란? 컴퓨터를 좀 오래 만져본 사람이라면 HTML과 태그란 말을 뭔진 몰라도 어디서 들어보긴 했을 것이다. 나도 마찬가지다. HTML이 웹페이지 문서의 형식이라면 태그는 실제 그 형식을 이루고 있는 구성 같은 거다. HTML이 '레고'라는 개념이면 태그는 실제 레고로 구조를 만드는 '레고 블럭'이라고 하면 될까. 레고 블럭을 가지고 에펠탑 모양도 만들고, 해리포터 호그와트 성도 만들고 자유롭게 표현하고자 하는 바를 표현할 수 있고, 그걸 레고라 부른다. 마찬가지로 태그로 내가 텍스트든 이미지든 비디오든 내가 표현하고자 하는 내용을 담고, 그러한 형식을 HTML이라고 부르는 것이다. 태그는 다음과 같이 생겼다. 바로 가기 이게 뭔가 싶겠다. 일단 나머지 부분이 무엇인지는 차근차근 알아가기로 하고, 태그는 굵은 .. 더보기 이전 1 다음
