Language/CSS (16) 썸네일형 리스트형 <CSS 기초> 06. Float 1. Float float속성은 주로 블록을 가로배치하기 위해 사용한다고 볼 수 있다. 그러나 내가 원하던 디자인이 완전히 깨져버릴 수 있다는 단점이 있다. 이것에 대해 자세히 알아보자. 먼저, float속성을 주게되면 부모태그가 그 사이즈를 인식을 못한다. 지금까지 x y 축의 2차원평면을 봤다면 z축으로 면 위로 붕 뜬다고 생각하면 좋다. 그러나 float속성을 주면 박스타입은 Block으로 바뀐다. 그러나 막지를 못하는 것이다. 그래서 float을 여러개 주면 이는 가로로 배치되게 된다. 그래도 block의 속성은 모두 사용가능하다. block임에도 다른점이 존재한다. 부모와는 동떨어져있으므로 width가 자동으로 부모사이즈가 되는 것이 아니라 content사이즈이다. 그리고 block은 width.. <CSS 기초> 05. Box 타입 Box는 각 박스별로 타입을 가지고 있다. 이는 HTML태그별로 부여되어 있지만 display속성을 통해서도 지정이 가능하다. 타입에는 Block, Inline, Inline Bolck, Flex 가 있으며 이번 장에서는 Flex를 제외한 세가지를 알아보자. 1. Block 먼저 block이다. 말그대로 막는다는 의미가 가장 크다. 보다시피 block의 속성을 갖고있는 박스의 오른쪽에 자리가 있음에도 아무것도 오지 못하고 있다. 이것이 block의 가장 큰 특징이다. block은 width, height, margin, padding, border의 위아래 옆쪽등 전부 사용이 가능하다. 별도의 width 선언이 없으면 width=부모의 content-box의 100%를 채운다. 따로 width를 선언한 .. <CSS 기초> 04. Box 모델과 크기 웹페이지의 구성요소들은 전부 박스모델을 갖고 있다. 박스모델을 통해 크기와 여백 모양 뿐아니라 위치까지 조정할 수 있다. 1. Box model 먼저 content를 살펴보자. 우리가 내용을 넣는 부분에 해당하며 width와 height 속성으로 가로와 세로의 크기를 조정할 수 있다. 다음은 padding이다. 내부의 여백을 의미한다. padding-left : 10px 나 padding-top : 10px 와 같은 방식으로 top right bottom left 등의 여백을 줄 수 있다. border은 테두리를 의미한다. border : 1px solid #fff 와 같이 굵기와 스타일 색을 지정할 수 있다. 이 때 스타일같은경우 주로 solid를 이용하여 일반적인 실선을 사용하지만 dashed와 do.. <CSS 기초> 03. 가상클래스 셀렉터 이번에 배울 Selector는 가상클래스이다. 1. Structural Pseudo-classes 구조적인 가상클래스를 알아보기 위해 HTML문서에서 리스트를 작성했다고 가정해보자. 리스트는 li태그를 통해 여러개가 생성되어 있을 것이다. 하지만 이 중에서 특정 순번에만 스타일을 지정하고 싶다면 어떻게 해야할까? 일일이 거기에 클래스를 지정해야할까? 정답은 그렇지 않다 이다. 우리는 가상클래스를 통해 원하는 곳에 좀 더 편리하게 스타일을 적용할 수 있다. li:first-child{ color: red; } li:last-child{ color: gray; } li:nth-child(2){ color: blue; } element:first-child 와 같은 구조를 통해 첫번째 요소에만 스타일을 적용할.. <CSS 기초> 02. 기본적인 셀렉터 이번 장에서는 본격적으로 HTML문서에 스타일을 적용하기 위해 Selector들에 대해 알아보자. 1. Type 먼저 타입을 이용하여 지정하는 방법이다. 예를 들어 HTML문서의 h1 태그에 스타일을 적용하고 싶다면 다음과 같이 쓰는 것이다. h1 { color : blue } 위는 h1태그에 글자 색을 파란색으로 적용하는 코드이다. 2. Class 다음은 class 를 이용한 방법으로써 타입보다 세밀한 조정이 가능하다. HTML의 태그에 우리는 class라는 속성을 적용할 수 있었다. 거기서 지정한 클래스명을 CSS에 받아서 스타일을 적용할 수 있다. .name1 { background-color: blue; } div.name1.name2 { background-color: brown; } 먼저 na.. <CSS 기초> 01. CSS의 기본과 사용 1. CSS 기본 CSS는 Cascading Style Sheet의 약자이다. 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따른다. 이를 보완하기 위한 것이 스타일 시트이고 스타일 시트의 표준이 CSS이다. CSS는 즉 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다. 즉 더 다양한 디자인을 더 효율적으로 할 수 있게 되었고 유지와 보수도 기존에 비해 간편해졌다. 2. CSS 사용 우리가 작성했던 HTML에서 CSS스타일을 입히는 방법은 총 3가지가 존재한다. 첫째, HTML문서의 태그에 속성으로 style을 주는 것이다. 이 스타일 속성에 CSS 코드를 입력함으로써 그 태그에.. 이전 1 2 다음
