웹 표준 썸네일형 리스트형 [웹] HTML/CSS #10 :: <div> 태그와 시맨틱 태그 HTML은 컨텐츠를 담는 통이다. 그리고 통에는 파티션이 나눠져 있어야 내용물을 정리하기 좋다. HTML도 마찬가지다. 웹사이트의 내용은 종종 엄청 많고 복잡해지기도 한다. 그리고 혼자 작업하는 게 아니라 여러 사람들이 함께 작업하거나, 내 작업을 이후 후임자가 유지보수할 수도 있다. 그럴 때 나 같은 태그들이나 태그 안에 한 번에 담겨있으면, 웹사이트의 구조를 파악하기 어려울 것이다. 이걸 도와주는 게 태그다. 는 별 내용이 없다. division의 약자인데, 말 그대로 구간을 나눈 것 뿐이다. 예를 들어 제목과 본문을 구분하고 싶다면 아래 표처럼 구간을 나눌 수 있다. 제목 본문내용본문내용본문내용본문내용본문내용 이렇게 파티션을 나눠두고, 각각 id를 지정해서 의미를 알 수 있게 하면 오랜 시간이 지난.. 더보기 [웹] HTML/CSS #7 :: 실무에 자주 쓰이는 속성 속성들에 대해 좀 더 디테일을 알아볼 차례다. 모든 속성을 다 소개할 수는 없고 실무에서 자주 쓰이는 대표적인 속성들, 꼭 알아야 하는 것들만 알아보겠다. 그 외에는 그 때 그 때 필요할 때, 이 기능이 있으면 좋을 것 같단 생각이 들 때 검색을 활용하면 된다. 레퍼런스를 참고하거나. HTML 요소의 구조도 1. class 속성 a b c 가장 많이 쓰이는 속성 중 하나다. class는 말 그대로 클래스다. HTML 요소들을 일정 클래스로 분류하는 것. a, b, c 학생(요소)는 1반(클래스)으로 지정하고, d, e, f 학생(요소)는 2반(클래스)로 지정한다면 무엇이 편할까. 클래스는 CSS에서 해당 요소들을 선택하기 위해 사용하는 것이다. 즉 CSS에서 클래스를 선택하여 서식을 적용하면, 해당 클래.. 더보기 [책] HTML5+CSS3 웹 표준의 정석 :: 웹 기획자, 웹 퍼블리셔, 웹 디자이너, 프론트엔드 개발자가 되고 싶다면 초등학교 때 정보? 컴퓨터? 과목에서 html을 배운 적이 있다. 그 때는 이게 왜 필요한 지도 몰랐다. 선생님이 하라는 대로 메모장에다가 의미를 알 수 없는 기호 같은 것들을 집어넣으면 색깔이 바뀌고, 내용이 입력되고 그랬던 것 같다. 다음 카페 배너 같은 걸 만들 때 태그가 필요하다 그랬나, 그런 걸 얼핏 본 기억도 난다. 왜인지 기억나는 이름이 장미 가족의 태그 교실. 집에 동생이 샀던 책이 있었다. 연예인 카페에 올릴 뭐 만든다고 아마 샀을 거다. 그 당시의 인터넷과 지금의 인터넷은 느낌이 상당히 다르다. 일단 디자인이 다르다. 옛날 홈페이지는 동글동글하고 명암이나 그라데이션도 들어가고 상당히 입체적이다. 요즘은 플랫이다. 무엇이 예쁜가는 시대에 따라 바뀌니깐 넘어가자. 지금은 무엇보다도 웹의 사.. 더보기 [웹] HTML/CSS #1 :: HTML이란? 지난 포스팅에 언급한 것처럼 HTML은 HyperText Markup Language의 약자다. 하이퍼텍스트를 마크업 하는 언어. 하이퍼텍스트는 하이퍼링크다. 페이지와 페이지를 연결해주는 링크. 즉 HTML은 페이지 상에서 하이퍼링크를 구성, 배치할 수 있도록 하는 언어. 이렇게 말하면 좀 어렵다. 비유적으로 더 쉽게 말하면 HTML은 내용을 담는 통이다. 담긴 내용은 크롬, 익스플로러 같은 웹 브라우저를 통해서 볼 수 있다. 담고자 하는 내용물을 통에 막 담는데 이걸 맨 눈으로 보면 뭐가 뭔지 제대로 보인다. 근데 웹 브라우저라는 특수 안경을 끼고 보면 의도한 대로 내용이 보인다고 하면 쉬운 설명일까. 웹 브라우저를 통해 본 네이버 우리가 보는 웹페이지, 즉 인터넷의 내용물은 모두 HTML로 구성되어 .. 더보기 이전 1 다음
