개발일지 작성 3일차
요약
- CSS를 처음 배움
- html/CSS에서의 부모자식, 상속개념
- 선택자 개념
- 우선순위 개념
학습 내용
부모자식관계
<header> <ul> <li></li> <li></li> </ul> </header>
ul태그를 기준으로 header는 부모, li는 자식태그
li끼리는 형제태그
상속
- 부모태그의 속성을 자식태그가 물려받음
- 속성값이 적용되는 우선순위
1. 자신의 고유한 속성- 가장 가까이서(?)상속 받은 속성
- HTML은 CSS로 적용받은 디자인에 상속이 적용됨
적용예시
HTML
<header> <h1>header h1</h1> <p>header p</p> <a href="#">naver</a> </header> <footer> <h1>footer h1</h1> <p>footer p</p> </footer>
CSS
header { color: red; } footer h1 { color: blue; } p { color: green; }
결과출력
header h1 : header에 red값을 적용한 결과 자식태그인 h1에도 적용된 것을 확인할 수 있음
header p : header에 red값이 적용되어있지만 하위태그인 p태그에 green값이 적용되어 있어 초록색으로 출력되었음
naver : a태그는 header태그에 적용된 red이외의 값을 상속받지 않았으나 자체적으로 색상에 대한 속성값을 내장하고 있어서 파란색으로 출력되었음
footer h1 : h1태그 전체가 아닌 footer h1에 대해 blue값을 지정해준 결과가 출력되었음
fotter p : 그냥 p태그에 적용된 green값으로 출력됨.
CSS문법
- 아래와 같이 적용할 대상을 쉼표로 구분, 나열하여 속성을 동시에 적용시킬 수 있음.
header h1,
footer h1 {
color: blue;
}
header p,
footer p {
color: green;
}- 선택자
HTML
<h1>Hello World</h1> <h2 id="test1">nice to meet you</h2> <h3 class="test2">welcome</h3> <input type="text" placeholder="name"> <input type="password" placeholder="pw">CSS, 선택자의 종류
/*타입선택자. html 태그를 기준으로 접근*/ h1 { color: red; } /*id선택자. 태그에id 부여 - id에 속성부여*/ #test1 { color: blue; } /*class선택자. 태그에class 부여 - class에 속성부여*/ .test2 { color: green; } /*속성선택자. 태그의 특정 속성을 []로 선택 후 속성 부여*/ input[type="text"] { border: solid 10px red; } input[type="password"] { border: solid 10px blue; }결과출력
- CSS 적용 시 id와 class의 차이
id는 이름, class는 별명?
id
- 개별 id는 각각 한 가지의 속성 값만 가질 수 있음
- 동일한 속성값을 가진 id가 여러 태그에 적용될 수 없음
class
- class는 여러 속성을 가질 수 있음
- 여러 다른 태그가 같은 속성값을 가진 class를 속성으로 가질 수 있음
- 선택자 혼용
HTML
<header id="intro"> <div class="container"> <h2>header h2</h2> <p>header p</p> </div> </header>CSS
#intro h2 { color: red; } #intro .container p { color: blue; }결과출력
header h2와 header p는 각각
id선택자 - 타입선택자
id선택자 - class선택자 - 타입선택자
를 통해 선택되어 속성이 적용되었다.
구분자(# .)를 유의하여 볼 것
- 우선순위(cascading)
동일한 선택자의 경우 가장 마지막에 입력한 속성값이 적용된다.
html
<h1>Hello World</h1>CSS
h1 { color: red; } h1 { color: blue; }결과출력
여러 선택자가 한 태그에 적용된 경우
<h1 style="color: #;" id="color-1" class="color-2"> Hello World</h1>위와 같은 경우 연결된 CSS문서에서의 입력 순서와 무관하게 속성의 우선 순위에 따라 결정되며 순서는 다음과 같다.
1. style 속성
2. id
3. class
4. tag(타입선택자)
지정의 정도(?)가 다른 경우
HTML
<header> <div> <h1>hello</h1> </div> </header>CSS
header div h1 { color: blue; } div h1 { color: red; }CSS의 두 코드는 같은 대상인
<h1>hello</h1>을 지정하고 있고 div h1{}이 가장 마지막에 작성되었으나 결과는 파란색으로 출력된다.
CSS 명령어
공간 조절
width: 100%; height: 300px; min-width: 600px; max-width: 1200px;
폭과 높이는 고정된 픽셀값이나 비율로 설정할 수 있다. 비율의 경우 부모태그의 크기 안에서의 비율이다. 최소치와 최대치를 결정할 수 있다.
border: 10px red solid; border-radius: 50px;
border는 테두리를 만들어준다. 속성값으로 선의 두깨, 종류, 색상을 가지며 입력 순서는 무관하다.
border-radius로 모서리 부분의 라운드를 만들어 줄 수 있다.
background-color: yellowgreen;
지정된 영역에 배경 색상을 준다.
*영역을 나누는 일은 웹페이지 구성에서 중요한데, 영역의 배경색은 투명한 것이 기본값이다. 감이 없을 때는 색상을 지정한 상태로 확인하는 것이 좋을 것.
텍스트 조절
color: blue; color: #FFFABA color: rgb(123, 123, 321); font-size: 80px; font-style: inital; (기울이기, 볼드처리 등) font-family: 복수의, 폰트, 서체를, 지정가능; font-weight: 300; (굵기) text-decoration: underline; (밑줄) text-decoration: line-through; (취소선) text-align: left / right / center;
컬러는 나열된 3가지 방법으로 표시 가능함
font-family에 지정된 복수의 폰트 서체 중 앞쪽의 것을 먼저 사용, 사용자 환경이 폰트를 지원하지 않는 경우 다음 폰트를 적용하는 식.
text-align을 통한 글자의 정렬은 폰트가 속한 태그의 영역을 기준으로 좌, 중, 우에 정렬
백그라운드
width: 폭; height: 높이; background-color: 배경색; background-image: url(이미지의 주소); background-repeat: repeat-x / repeat-y / no-repeat; background-position: top/bottom/left/right/center/top left 등으로 모서리 배치 가능;
백그라운드에 이미지를 추가할 때 이미지 크기가 백그라운드보다 작으면 여분 공간만큼 자동으로 반복하는 특성을 가지고 있다. 이를 조절하는 속성이 background-repeat 이다.
img태그와 CSS를 통한 이미지 삽입의 차이
- CSS를 통해 삽입된 이미지는 적용된 태그의 범위까지만 표시되는 반면 img태그를 통해 삽입한 이미지는 지정 범위에 맞춰짐
- 웹 접근성을 위해 정보성이 있는 이미지는 img 태그를 통해 넣는 것이 좋다. (img태그의 alt속성 때문)
추가 학습
미해결 - 솔루션
x
질문거리
x
복습
상속, 선택자, 우선순위의 일반적인 특성들을 염두에 두면 개별적 CSS속성들의 적용 결과를 어느 정도 예측할 수 있다. 따라서 이 특성들을 다시 훑어 볼 것.
학습 소감
html문서가 잘 정돈되어 있어야 CSS를 통해 시각화 하는 과정에서 혼선이 발생하지 않을 것이라는 생각이 들었다. 문제는 html문서가 시각 정보를 제공하지 않는다는 점. 결국 이를 통해 구조를 파악하게 되기까지 연습이 많이 필요하리라 생각된다.
