재유's

배경관련 기본 속성 (background) 속성 설명 background-color 배경색상 지정 background-image 배경이미지 url("파일경로"); 외부 css파일에서 명시할 경우 파일 경로는 html기준이 아닌 css 파일 기준이 된다. background-repeat 배경이미지 반복 설정 repeat, repeat-x, repeat-y, no-repeat background-attachment 스크롤에 따른 배경 이미지 처리 scroll, fixed background-position 배경이미지 위치. left, right, top, bottom, center, px값 background 위의 다섯가지 속성을 공백으로 구분하여 일괄 명시. 불필요한 요소는 생략 가능 배경관련 속성 활용 ..

레이아웃 구성하기 사이트의 전체 넓이와 정렬을 구성하기 위한 태그 안에 각 영역을 구성하기 위한 태그를 배치하고, float 속성을 사용하여 각 영역을 배치하는 처리 3단 레이아웃 상단영역 내용영역 하단영역 또는 상단영역 내용영역 하단영역 - #container에 넓이와 margin속성을 사용하여 정렬을 구성- #header, #footer에 각 영역에 대한 height지정 (고정높이)- #content 영역은 내용에 따라 높이가 변경되어야 하므로 min-height지정(가변 높이) 사이드바 구성 상단영역 사이드바 내용영역 하단영역 - 3단 레이아웃 상태에서 #content에 사이드바와 본문영역을 위한

float 속성박스를 부모의 왼쪽이나 오른쪽에 고정시키고 문장을 그 옆으로 흐르도록 하기 위한 속성 적용 가능한 값속성 설명 left 왼쪽 right 오른쪽 none 해제 inherit 부모값 상속 제약 사항- 새로운 문단을 시작하기 위해서는 이전 float를 off 시켜야 한다.- 부모요소가 float가 적용된 자식요소를 감싸지 못한다. 해결책- 이전 float 속성을 해제부모요소가 끝나기 전( 혹은 새로운 문단이 시작하기 전)float:none; clear: both;가 적용된 block-level요소를 배치 방법1 : 빈 이용 방법2 : 부모의 :after 가상 클래스를 사용해서 아래코드 적용 ... 내용 ...

박스의 위치 margin: px, %;- 바깥 여백을 의미- 벽을 밀어서 자신이 이동하거나 주변의 다른 요소를 밀어내는 효과- 서로 마주보고 작용하는 margin은 겹침 현상 발생- 음수 값을 지정할 경우 반대 방향으로 힘이 작용(끌어당김)- 값을 하나만 지정할 경우 : 상, 하, 좌, 우 모두 동일- 값을 두 개 지정할 경우 : 상/하, 좌/우- 값을 네 개 지정할 경우 : 상단부터 시계 방향 회전 ( 상, 우, 하, 좌 ) margin: auto부모 요소의 width에서 현재 자신의 크기를 뺀 나머지를 자동으로 계산하여 margin에 부여한다.속성 설명 margin-left: auto 박스가 부모의 오른쪽에 배치된다. margin-right: auto 박스가 부모의 왼쪽에 배치된다. left와 rig..

RGBA 색상값 RGBA(0~255, 0~255, 0~255, 0~1)라는 색상표가 있는데 이는 rgb색상값에 투명도가 더해진것이다. CSS로 표현하자면 rgb(255, 0, 0);opacity:0.5; 를 한줄로 표현하면 rgba(255, 0, 0, 0.5)가 된다. 순서대로R : RED (빨강)G : GREEN (초록)B : BLUE (파랑)A : OPACITY (투명도)

박스란? block-level요소를 의미하는 것으로 가장 대표적인 요소는 가 있다. 박스 크기를 구성하는 기본 속성속성 설명 값 비고 width 내용 영역의 가로 폭 px단위, %단위 부모의 width, height를 기준으로 한다. heifht 내용 영역의 세로 높이 px단위, %단위 border 박스의 테두리 굵기 종류 색상 padding 테두리와 내용영역 사이의 여백 여백 사이즈에 대한 px단위 border 속성에서의 종류값속성 설명 none 투명 solid 직선 dotted 점선 dashed 끊긴선 border 값의 세분화 - 위치에 따른 구분 : border-top, border-left, border-bottome, border-right - 속성에 따른 구분 : border-width, bo..

문단 관련 속성 속성 설명 값 text-align 텍스트의 가로축 정렬 left, center, right text-indent 첫 번째 줄에 대한 들여쓰기 px 단위 값 text-decoration 밑줄, 윗줄, 취소선, 깜박임 효과 none(기본값), underline, over-line, line-through vertical-align 어떤한 요소를 기준으로 한 세로축 위치 top, middle, bottom letter-spacing 글자간의 간격 (자간) px 단위 값 word-spacing 단어간의 간격 (어간) px 단위 값 white-space 줄 바꿈 속성 제어 normal, nowrap - vertical-align : ~~을 기준으로 텍스트를 배치해야 하기 때문에 텍스트 주변의 이미..

글자 모양 관련 속성속성 설명 font-family 글꼴의 이름을 쉼표로 구분하여 나열 font-size 글자크기 ( px단위를 주로 사용함 ) font-style 글자의 기울임 여부 --> italic, normal(기본값) font-weight 글자의 굵게 표현 여부 --> bold, normal color 글자 색상 line-height 한 줄의 높이 (px, %단위 표현) --> %단위 인 경우 font-size를 기준으로 함 font 일괄 표현 ▼[style] [weight] size[/line-height] family 웹 폰트CSS에서 font-family 속성으로 지정한 글꼴이 접속자의 PC에 설치되어 있지 않을 경우 고르게 표시되지 않는 문제를 해결하기 위해 폰트파일을 온라인에 올려두고 ..

CSS 구체성 단위CSS 셀렉터에 id, class, tag이름이 갖는 점수를 계산하여 점수가 높은 selector가 우선 순위를 갖는다. 셀렉터 점수 id 100점class 10점 tag 1점 HTML태그에 style속성을 사용하여 CSS를 직접 명시하면 1000점!대부분 무조건 적용되는데 이 사용방법은 비추천!

selectorCSS가 적용될 대상을 지정하는 방법1. 태그 이름ex) h1 { color: red;} 2. class : 앞에 점을 포함한 단어 명시(단어는 직접 네이밍한다.)HTML태그에 class속성으로 단어를 연결(이때 점은 제외함)- 태그 종류에 상관 없이 여러번 재사용 가능.hello{ color : red; } 3. id : 앞에 #을 포함한 단어를 명시 (단어는 직접 네이밍 한다.)HTML태그에 id속성으로 단어를 연결( 이때는 #을 제외함 )- 하나의 HTML문서 안에서 다른 요소와 중복될 수 없다.#hello {color : red; } selector 조합하기 1) 구체적으로 서술하기 => 특정 요소를 자세하기 명시태그 이름 + classdiv,hello (띄어 쓰기 x)태그 이름 +..