개발일지 210630

개발일지 작성 3일차

요약

• CSS를 처음 배움
• html/CSS에서의 부모자식, 상속개념
• 선택자 개념
• 우선순위 개념
  

학습 내용

부모자식관계

<header>
	<ul>
		<li></li>
		<li></li>
	</ul>
</header>

ul태그를 기준으로 header는 부모, li는 자식태그
li끼리는 형제태그

상속

• 부모태그의 속성을 자식태그가 물려받음
• 속성값이 적용되는 우선순위
  1. 자신의 고유한 속성
  2. 가장 가까이서(?)상속 받은 속성
• 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문서가 시각 정보를 제공하지 않는다는 점. 결국 이를 통해 구조를 파악하게 되기까지 연습이 많이 필요하리라 생각된다.