웹어플리케이션15 [HTML / CSS] CSS 선택자 1. Tag (태그 이름) /* 모든 태그 */ h1 { font-size: 80px; } CSS 적용 대상 O CSS 적용 대상 X 2. Class (클래스) / Id (아이디) /* class 'red' 를 갖는 모든 태그 (class는 '.'를 앞에 붙여표시) */ .red { color: red; } /* id 'blue' 를 갖는 태그 (id는 '#'를 앞에 붙여표시) */ #blue { color: blue; } CSS 적용 대상 O CSS 적용 대상 X CSS 적용 대상 X CSS 적용 대상 O CSS 적용 대상 X CSS 적용 대상 X 3. Children (자식) /* class 'parents'를 갖고 있는 자식 요소 중 모든 태그 */ .parents h1 { color: orange.. 2019. 12. 28. [HTML / CSS] 배경이미지 삽입 1. Background-Repeat (배경이미지 반복) background-repeat 속성 값 설정으로 배경이미지 반복 여부 및 방법 결정 /* 반복하지 않음 */ background-repeat: no-repeat; /* 가로 방향으로만 반복 */ background-repeat: repeat-x; /* 세로 방향으로만 반복 */ background-repeat: repeat-y; /* 가로와 세로 모두 반복 */ background-repeat: repeat; /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분 */ background-repeat: space; /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해 배분 */ background-repe.. 2019. 12. 26. [HTML / CSS] Box Decorations 1. Border-Radius (둥근 모서리) boder-radius 속성 값으로 설정 radius 속성 값 크기에 비례해서 둥그러짐 radius 속성 값 상하좌우 각각 다르게 설정 가능함 2. Background-Color (배경색) background-color 속성 값으로 설정 배경색을 지정해 줌 배경색을 투명하게 둠(기본값) 3. Box-Shadow (그림자) box-shadow 속성 값으로 설정 (기본값은 none) 그림자 가로 세로 위치만 설정해주면 그림자 생성 그림자 색 설정 (기본값: black) 그림자 흐림(blur): 가로 세로 위치 뒤에 값 추가 그림자 흐림 크기(spread): blur 값 뒤에 값 추가 4. Box-sizing padding과 border 값을 설정하더라도 widt.. 2019. 12. 26. [HTML / CSS] BOX MODEL 1. Box Model 구성 Content : 실제 내용 Padding : 내용과 테두리 사이의 여유공간 Border : 테두리 Margin : 현재 요소와 다른 요소 사이의 여백 2. Margin padding의 상하좌우 각각 다른 넓이를 설정합니다. padding의 상하좌우 각각 다른 넓이를 한 번에 설정합니다. padding의 상하좌우 같은 넓이를 설정합니다. padding의 상하와 좌우만 다른 넓이를 설정합니다. 3. Padding margin 상하좌우 각각 다른 넓이를 설정합니다. margin 상하좌우 각각 다른 넓이를 한 번에 설정합니다. margin 상하좌우 같은 넓이를 설정합니다. margin 상하와 좌우만 다른 넓이를 설정합니다. 가운데 정렬 합니다. 4. Content - width, .. 2019. 12. 24. 이전 1 2 3 4 다음
