목록Programming (58)
Be ready to study forever - 개발자 꿈나무
8. CSS속성/배경 8.1. background 값 의미 기본값 background-color 배경색상 transparent background-image 하나이상의 배경 이미지 none background-repeat 배경 이미지 반복 repeat background-position 배경 이미지 위치 0 0 background-attachment 배경 이미지의 스크롤 여부(특성) scroll background-size 배경이지미 크기 *단축속성 사용법 – background : 색상 이미지경로 반복 위치 스크롤 특성; ex) div{ background: red url(../google/image.png) no-repeat left top scroll; } div { background-color ..
7. CSS속성 – 띄움 정렬 7.1. float – 요소를 좌우방향으로 뛰움 (수평정렬으로 많이씀) 값 의미 기본값 none 요소띄움없음 none left 왼쪽으로 뛰움 right 오른쪽으로 띄움 ex) div { float : right; } *중간에 float을 해제하기위해서는 clear : both;를쓴다. 멈추자 하는 요소에서 clear를 쓰지 않는다면 요소가 겹치는 문제가 발생할 수도 있다. * float을 사용할 경우 대부분의 요소가 display : block 으로 바뀌어버린다. 7.2. position – 요소의 위치 지정 방법의 유형(기준점)을 설정 값 의미 기본값 static 유형없음/ 배치불가능 static relative 요소 자신을 기준으로 배치 absolute 위치상 무모 요소..
6. CSS속성 – 글꼴,문자 6.1. font -글자의 크기,색상등을 지정 값 의미 기본값 font-style 글자기울기 normal font-weight 글자두께 normal(400)//100-900 백단위 font-size 글자크기 medium (16px) line-height 줄 높이 normal font-family 글꼴 운영체제에따라 달라짐 *사용법 – font: 기울기 두께 크기 / 즐높이 글꼴 *ex) .box { font : italic bold 20px / 1.5 “arial” } 6.2. color – 글자의 색상을 바꿔줌 // background-color 와는 다름 색상표현의 예시 값 의미 예시 색상이름 브라우저에서 제공하는 색상 red, blue hex 색상코드 16진수 색상 #..
5. CSS속성 – 박스모델 5.1. width, height 박스요소 – 기본 width = 100%, 기본 height = 0px 인라인요소 – 기본 width = 0px, 기본 height = 0px 5.2. max-width, min-width, max-height, min-height max-width : 요소가 가질 수 있는 최대 넓이. min-width : 요소가 가질 수 있는 최소 넓이. max-height : 요소가 가질 수 있는 최대 높이. min-height : 요소가 가질 수 있는 최소 높이. 5.3. margin – 박스요소의 외부의 여백 선언방법 margin : 1px 1px 1px 1px // 위, 오른쪽, 아래, 왼쪽 margin : 1px 1px 1px // 위, 좌우, 아..
4.속성값 단위 4.1. px ,% px - px단위 % - 상위요소 내에서의 퍼센티지 4.2. em, rem em – 글자 크기를 기본값으로 가지고있음 1em = 글자크기, 2em 글자크기의 2배 rem – em은 font-size가 상속속성이기 때문에 상속받는다 하지만 rem은 상속받지않음 4.3. vw, vh vw – 1~100까지의 단위로 뷰포트의 넓이 vh – 1~100까지의 단위로 뷰포트의 높이 4.4. vmin, vmax vmin – 뷰포트값의 1~100으로 최소크기 속성값을 가짐(기준이하로 줄지않음) vmax – 뷰포트의 1~100으로 최대크기의 속성값을 가짐(기준이상 늘지않음) References: heropy.blog
3. CSS 적용 순위 여러가지 스타일이 중복으로 겹치는 경우 우선순위가 적용된다 1. !important 를 붙인 속성 2. inline 스타일로 지정된 속성 3. id 선택자로 지정된 속성 4. class 선택자로 지정된 속성 5. 태그이름으로 지정된 속성 References: heropy.blog
2. 상속 – 상위요소에서 적용된 스타일을 하위요소에서도 물려받아 적용되는 것 *모든 속성이 상속되는건 아님 *대표적으로 상속되는 요소: font, color * position, background 속성은 상속되지 않는다, 다만 inherit 키워드로 강제상속 할 수는 있음. Ex) div { border : 1px solid black; } div li { border : inherit; } References: heropy.blog
1. 선택자 - CSS에서 스타일을 어디에 적용할지 선택하는 인자 1.1 태그선택자 Html의 태그를 선택함 문법 – {태그 이름} Ex) div, span, title, 1.2 클래스 선택자 지정된 특정한 클래스를 선택함 문법 - .{클래스 이름} Ex) .navigation-bar, .white-board 1.3 아이디 선택자 특정한 아이디만 선택함 문법 - #{아이디 이름} Ex) #first-title, #curvel 1.4 복합선택자 두개 이상의 선택자를 포함하여 두개 이상의 조건을 만족하는 태그를 찾는 선택자 Ex) 1. A > B – A의 하위요소 첫번째 B만선택 2. A B -A의 하위요소 B모두선택 3. A.B - A요소중 B클래스인 요소 References: heropy.blog