DEVELOP/HTML&CSS 썸네일형 리스트형 [웹] HTML/CSS #13 :: 부트스트랩 반응형 웹 디자인을 할 때 유용한 프레임워크가 있다. 부트스트랩이다. 트위터 개발자들이 만든 CSS 프레임워크이다. 이미 반응형과 관련된 CSS 코드들이 다 만들어져 있고, 내 HTML 소스코드에다가 해당 클래스를 입력하기만 하면 알아서 적용이 된다. 매우 간편하다. 어떤 프레임워크나 마찬가지겠지만, 장단점이 있다. 부트스트랩의 장점은 역시 빠르고 간편하다는 것이다. 이미 만들어져있는 소스를 가져다 쓰기만 하면 되니 빠르다. 직접 하나하나 CSS를 지정해가면서 디자인할 필요가 없는 것이다. 단점이라면 디자인이 정형화 되어있고, 완벽하게 커스터마이징 하기에는 무리가 있달까. 가장 좋은 방법은 부트스트랩으로 그리드를 잡고, 개별 디자인 요소들은 직접 꾸미는 것이라고 생각한다. 부트스트랩의 기본은 그리드다. .. 더보기 [웹] HTML/CSS #12 :: 미디어쿼리 반응형vs적응형 포스팅에서 반응형은 미디어쿼리를 이용해서 만든다고 언급했다. 미디어쿼리는 단순하게 CSS의 조건문이라고 생각하면 편하다. 정확한 개념은 아닐 수도 있다. 하지만 기능은 그와 같다. '미디어 유형이 무엇이고 화면 넓이가 x 픽셀 이상일 때, a 태그에 이런 서식을 적용해라'라고 정의하는 것이다. 미디어쿼리의 포맷은 아래와 같다. @media 유형 and (조건) { css 선택자 { css 속성: css 값; } } 실제 코드를 보면 더 쉽게 이해가 될 것이다. 그냥 보통의 css 코드를 "@media 유형 and (조건) { }"의 중괄호 안에 집어넣은 것이다. 그럼 html 파일이 보여지는 디바이스의 유형과 조건이 맞을 때에 한해, 중괄호 { }안의 css가 적용되는 것이다. 다음 예를.. 더보기 [웹] HTML/CSS #11 :: 반응형 vs 적응형 직접 페이지를 만들어보기 전에 우선 반응형 웹 디자인에 대해 알고 갈 필요가 있다. 모바일, 태블릿, 데스크탑 등 다양한 디바이스가 넘쳐나는 요즘 반응형은 필수다. 웹에 조금이라도 관심이 있다면, 그리고 없어도 우연히 한 번 쯤은 반응형이란 말을 들어봤을 것이다. 그럼 반응형은 대체 뭐에 반응하는 걸까? 눈치가 있다면 '아, 웹사이트에 접속하는 디바이스에 반응하는구나'라고 생각할 수 있다. 안타깝게도 반은 맞고 반은 틀렸다. 보다 정확히는, '접속하는 디바이스의 화면 크기'에 반응한다. 그게 그 말 아닌가 싶기도 하지만 굳이 깊게 들어간 이유가 있다. 바로 적응형이라는 개념 때문이다. 둘 다 다양한 디바이스에서 제대로 웹페이지를 보여주기 위한 기술이다. 그럼 반응형과 적응형, 영어로는 Responsive.. 더보기 [웹] 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)라고 부른다. 그리고 파란색으로 색칠한 와 를 앞선 포스팅에서 설명한 것처럼 태그라고 부른다. 그리고 오프닝 태그의 안에 담겨있는 주황색, 저게 속성.. 더보기 이전 1 2 다음
