공부하고 또 공부하는

[개요] 아래와 같은 디자인의 CSS 작성방법입니다. [예시] [결과] 좌우로 배치하는 것은 float와 clear를 이용하면 구현할 수 있습니다. 가운데 정렬 또한 텍스트이기 때문에 text-align 속성을 이용하면 됩니다. 하지만 수직 가운데 정렬은 아래와 같이 구현할 수 있습니다. [padding] 첫번째로 많이 사용되는 방법은 padding을 이용한 방법입니다. 상하 여백이 얼마인지 아는 경우라면 그에 맞춰서 텍스테에 상하 padding을 주면 됩니다. [예시] [결과] [line-height] line-height는 본래 줄 간격을 나타내는 매트릭이지만, 인라인 요소의 수직 가운데 정렬을 구현하기 위해서도 널리 이용됩니다. 이 값은 160%, 1.8 등 비율로도 표현할 수 있지만 px단위로도 ..

[left와 margin-left] absolute position의 left와 margin-left 속성을 잘 이용하면 이를 구현할 수 있습니다. left를 일단 50%주고, width의 절반만큼 더 왼쪽으로 이동시키면 됩니다. HTML 요소의 좌표계는 중앙이 아닌 좌상단이기 때문입니다. margin-left 속성은 신기하게도 음수 값을 주면 그 값만큼 요소를 왼쪽으로 이동시킵니다. 이 특징을 이용하면 left:50%, margin-left:-{width/2} 의 값을 주면 가운데 정렬이 된 것처럼 보입니다. 단 width를 동적으로 가져와 절반 만큼 사용하는 방법은 일반적으로 존재하지 않습니다. 직접 width와 padding을 계산해서 적어주어야 합니다. 또 absolute 요소는 부모의 heigh..

[float + clear 속성으로 수평 레이아웃 구성하기] 먼저 수평으로 배치되어야 할 요소들에게 float:left 를 줍니다. 만약 특정 요소만 오른쪽에 고정되어야 한다면 right를 줄 수도 있습니다. 그리고 이들을 감싸는 컨테이너를 하나 만들고, :after 가상 선택자에서 clear를 하도록 하면 됩니다. [예시] [결과] 아래와 같이 작성을 하게 되면 복잡한 형태의 레이아웃도 만들 수 있습니다. main이 수평 컨테이너 역할을 하는 것과 같습니다. [예시] [결과] [종합] 컨테이너는 고유하지 않습니다. 컨테이너 안에 다른 컨테이너가 들어갈 수도 있고, 컨테이너가 수직으로 여러 개 배치될 수도 있습니다. [예시] [결과]

[개요] position 속성은 태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 갖습니다. static : 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없습니다. absolute : 절대 좌표와 함께 위치를 지정해 줄 수 있습니다. relative : 원래 있던 위치를 기준으로 좌표를 지정합니다. fixed : 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정합니다. inherit : 부모 태그의 속성값을 상속받습니다. 좌표를 지정해주기 해서는 left, right, top, bottom 속성과 함께 사용합니다. position 을 absolute 나 fixed 로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 됩니다. ..

[개요] float 속성은 원래 이미지와 텍스트 배치 용도로 등장했지만, 요즘에는 레이아웃용으로 많이 사용하고 있습니다. 태그를 float 속성 및 width, height 속성 등을 이용하여 레이아웃을 배치하는 방식입니다. [예시] [결과]

[개요] float 라는 단어는 원래 '뜨다'라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. inherit : 부모 요소에서 상속 left : 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. right : 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none이 아니라면 display 속성은 무시된다. none : 요소를 부유시키지 않음 left 와 right 를 통해 부유속성을 지정시 display 는 무시됩니다.(none은 제외) 또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라..

[개요] border 속성은 태그의 테두리를 설정하는 속성으로, background 속성과 비슷하게 세부적인 속성들을 한번에 쓸 수 있는 속성입니다. width-style-color 의 순서로 사용합니다. border-width 테두리의 두꼐로, 주로 px단위를 사용합니다. border-style 테두리의 스타일로 실선, 점선, 이중선 등의 옵션이 존재합니다. border-color 테두리의 색상으로, 값은 color 속성의 포맷을 사용합니다. [예시] [결과] [방향] 테두리의 특정 방향만 따로 설정할 수도 있습니다. border-top border-bottom border-left border-right border-bottom-color 처럼 방향과 색, 두께, 스타일을 따로 설정할 수도 있습니다...

[개요] background 속성은 태그의 배경을 지정하는 속성으로, font 속성과 비슷하게 세부적인 속성들을 한번에 쓸 수 있는 속성입니다. 아래의 세부적인 속성을 가집니다. background-color 배경 색 background-image 배경 이미지 background-repeat 배경 이미지 반복 여부 background-position 배경 이미지 위치 [background-color] 배경색을 의미하며, 값은 color 속성의 포맷을 사용합니다. ※ 태그의 크기가 없을 경우 배경색을 표기되지 않습니다. [예시] [결과] [background-image] 배경 이미지를 설정하며, 주로 이미지 경로를 지정하는 방식으로 사용합니다. 경로는 background-image:url("이미지 경로")..

[개요] visibility 속성은 태그의 가시성을 결정합니다. 아래의 4가지 값을 가지며, 기본 값은 inherit 입니다. visible : 보임 hidden : 숨김(자신의 영역은 계속 차지) collapse : 겹치도록 지정)테이블의 행과 형 요소만 지정할 수 있으며, 그 외 요소를 지정하면 hidden으로 해석) inherit : 부모 요소의 값을 상속 [사용법] #box1 { visibility: hidden; } [예시] [결과]

[개요] border-radius 속성은 요소의 테두리를 둥글게 만들어 줍니다. px 단위와 % 단위를 사용할 수 있으며, border 속성 없이도 사용할 수 있습니다. 총 4개의 모설리를 각각 다른 값으로도 줄 수 있습니다. margin 및 padding 속성 처럼 4개의 값을 띄워쓰면 왼쪽-위-부터 시계 방행으로 각자 다른 값을 지정할 수 있습니다. [사용법] #box{ border-radius: 5px; border-radius: 1px 2px 3px 4px; } [예시] [결과]