[배운내용]
CSS강의
1. 디자인을 적용하는 방법
(1) head태그 안에 style태그 이용
적용시킬 태그{ 속성: 속성값;}
(2) 적용할 태그 안에 바로 style태그 이용
<적용시킬 태그 style="속성: 속성값;">
1~2방법은 속성값 뒤에 ;을 빠뜨리면 안된다. 또 한 위의 두가지 방법은 가독성이 많이 떨어진다는 단점이 있다.
(3) css파일을 따로 제작
css파일을 따로 제작할 경우, 적용될 html파일의 head태그 안에 아래의 link 태그를 적용시킨다.
<link rel="stylesheet" type="text/css" href="(파일경로)">※ CSS파일에서의 주석처리 : /* */
3. 디자인 적용의 우선순위
(1) 태그의 관계에 따른 우선순위
태그의 포함관계
<header>
<h1>Hello World</h1>
<p>Nice to Meet You</p>
</header>
<footer>
<h1>footer h1</h1>
<p>footer p</p>
</footer> → 여기서 안에 속하는 것을 기준으로, header는 h1와 p의 부모태그, 반대로 h1와 p는 header의 자식태그이다. 같은 위치에 있는 h1태그와 p태그는 형제관계에 있는 태그이다.
관계에 따른 우선 적용 순서
① 부모태그의 성질은 자식태그에 함께 적용된다.
: header에 글자색 빨강을 설정하면 자식태그인 h1와 p에도 글자색 빨강이 적용이된다.
② 본인의 성질은 부모의 성질보다 우선된다.
: header에 글자색 빨강을 설정했더라도 h1에 글자색 파랑을 설정하면 h1는 본인의 고유한 성질이 있으므로 빨간색에서 파란색으로 바뀐다.
③ 부모태그의 성질은 모든 자식태그에게 적용되는 것은 아니다.
: 예를 들어 a태그의 경우 태생적으로 파란색과 밑줄의 성질을 가지므로 부모태그에 빨간색 스타일을 적용시켜도 빨간색으로 나오지않고 파란색으로 나온다.
④ 여러 태그에 같은 성질을 부여하고 싶을때는 ,로 묶어 준다.
: ,(콤마)는 and의 성질을 가지므로 여러가지 태그에 같은 성질을 하고싶을 때는 header h1, footer p{}와 같은 방식으로 입력할 수 있다.
(2) 선택자의 종류에 따른 우선순위
선택자의 종류
① 타입선택자
: html태그를 기준으로 접근하여 스타일을 적용
ex) h1{ color: red;}
② 아이디선택자 (id="")
: html파일에서 태그에 이름을 부여하여 스타일을 적용한다.
이름은 유일한 것이므로 하나의 태그에는 속성값으로 하나의 아이디만 지정해야한다.
ex) #test1{color: blue}
[html파일]
<h2 id="test1">Something</h2>
[css파일]
#test1{color: blue;} ③ 클래스선택자 (class="")
: html파일에서 태그에 별명을 부여하여 스타일을 적용한다.
별명은 이름과 달리 여러가지를 지정할 수 있다.
ex) .test2{color: green;}
[html파일]
<h3 class="test2">Nothing</h3>
[css파일]
#test2{color: green;}→ ②,③ 두가지 방법은 같은 태그를 여러번 사용했을 경우 그 중에서도 각기 다른 스타일을 적용하고 싶을때 사용자가 내용에 이름이나 별명을 붙혀주어 스타일을 입힐 수 있는 방법이다.
④어트리뷰트선택자
: 속성선택자. type의 형태를 기준으로 서로 다른 스타일을 적용한다.
ex) input[type="text"] { border: solid 10px blue;}
선택자에 따른 우선 적용 순서
캐스캐이딩
style속성 > id > class > tag 의 순서대로 스타일이 적용된다
디테일하게 작성할 수록 우선순위가 높아진다.
2. CSS의 여러가지 속성
공간만들기
{
width: (픽셀(px) 혹은 퍼센트(%)로 표현) ;
height: ;
min-width: ;
max-width: ;
backgroung-color: ;
border: ( 색상 굵기 형태 - 순서상관없이 적기);
border-radius: px (라운드 적용)
}
color 설정 방법
① 단어 red, blue 등으로 표현
② 색상코드로 표현 #FFFFFF
③ RGB코드로 표현 rgb(123, 111, 21)
글자체 설정
{
font-size: ;
font-style: ;
font-family: ;
}
- font-family의 경우 여러가지 서체를 ,로 구분하여 작성하는데 이를 모두 적용시키는 것이 아닌 순서대로 우선순위로 첫번째를 적용하고 첫번째가 적용되지 않는 브라우저에서는 두번째... 와 같은 식으로 차례로 적용된다. font-family의 마지막은 sans-serif로 설정하도록한다. sans-serif는 모든 브라우저에서 오류없이 표현 가능하다.
이미지 넣기
{
width: 180px;
height: 180px;
background-color: yellowgreen;
background-image: url(icon.png);
background-repeat: no-repeat;
background-position: right bottom;
}
- 공간을 만들었을때, 공간보다 작은 이미지를 삽입하면 공간 안에서 반복해서 적용 된다.
background image는 액자 틀에 사진을 끼워넣는다고 생각하면 된다. 액자가 이미지 사진보다 크면 여백이 생기고, 액자가 이미지지 보다 작으면 이미지가 잘린 일부만 보이게 된다.
네이버 로고와 같이 정보를 가진 이미지는 css환경이 아닌 html에서 img 태그를 활용해야한다. 그 이유는 웹접근성과 관련있는데 img태그는 alt로 그 이미지의 정보를 입력할 수 있지만 백그라운드이미지를 활용하면 이미지에 대한 설명을 담을 수 없기 때문에 시각장애인은 그 이미지에 대한 정보를 알 수 없다. 그러므로 정보성을 띄는 이미지를 삽입할때는 img 태그를 사용해야 한다.
[어려웠던 점]
class선택자가 별명이고 별명이기 때문에 여러가지 별명을 붙힐 수 있다는 것은 이해가 되는데, 굳이 하나의 태그에 여러가지 별명을 붙힐 이유가 있을까? 어쨌든 색상을 적용시키면 제일 우선순위로 설정된 하나의 색상만 적용될텐데... 그 부분이 조금 의문스러웠다.
[해결방법]
수업을 한번 더 들으면서 오늘 velog를 정리하는데 같은 h2태그가 여러개 있을 경우 id나 class를 적용해서 각각 다르게 스타일을 부여하는 것처럼, 1번 클래스에는 글자색, 2번 클래스에는 배경색, 3번 클래스에는 서체나 폰트스타일등을 설정해서 하나의 태그에 여러가지 클래스 스타일을 적용시키는 경우에 사용될 것으로 예상된다. 내일 한번 더 멘토님께 질문하여 확인해야겠다.
[학습 소감]
오늘 진도가 한시간 반정도 밖에 안돼서 굉장히 수월하다고 생각했지만, 생각보다 오늘 배운 양도 많고 조금은 복잡한 내용이었던 것같다. 그래도 배움의 즐거움을 느낀게 너무 오랜만이라 재미있게 수업을 듣고 있다. 홈페이지의 프론트엔드에 정말 느리지만 조금씩 가까워지고있는 것 같다.
