1.학습한 내용
CSS (디자인)
- head 안에서 style 태그를 사용
속성 : 속성값; 사용 - 세미콜론은 필수
<meta charset="utf-8">
<style>
h1 {
color: red;
}
</style>-
바꾸고자 하는 태그 뒤 CSS 문법 넣기
style<h1 style="background-color: pink;">Hello World</h1>
html 문서, css 문서로 따로 관리하여 연동 - 가독성과 효율성 향상을 위해
- CSS확장자로 CSS 문서 만들기
- html에서 외부 파일을 가져올 때 'link' 태그 사용
- rel="stylesheet" : 링크태그로 연동되는 파일의 타입, 스타일 시트를 명시
- type="text/css" : 연동되는 파일의 글자는 CSS 언어로 구성
- href="" : 연동되는 파일의 경로 입력
- 양 파일 모두 저장해야 적용됨
- head에 넣기
CSS 기능
-
화면분할기능 : view -> layout -> columns2 (꿀팁)
-
주석처리 : /별 , 별/
-
상위항목(부모태그)에 디자인을 적용하면 하위항목(자식)에 똑같이 적용됨
but a 태그는 기본적으로 파란색이라 영향 X -
하위 태그에 적용하면 모든 하위 태그만 바뀜
-
단일 하위 태그에만 적용하고 싶을 때 : 부모태그를 앞에 붙여줌
header(부모태그) h1(바꾸고자하는 태그){color: blue;}
-
같은 디자인을 적용 시킬 때 쉼표를 통해 묶어서 적용 가능
선택자
CSS에서 Html 문서로 접근하는 방법
1. 타입 선택자
ex) html : h1 hello world /h1
css : h1{ color: red;}
2. id 선택자
태그에 id 이름을 부여해서 디자인을 적용하는 선택자
ex) html : h1 id = "test"
CSS : #test { color: blue;}
3. class 선택자
태그에 class 별명을 적용하여 디자인을 적용
ex) html : h1 class = "test"
CSS : .test { color: blue;}
*Id와 달리 class는 class를 여러개 가질 수 있음
ex) html : h3 class="bg-1 font-size-1">Class 선택자</h3
CSS : .bg-1{background-color: red;}
.font-size-1{font-size: 50px;}
*ID는 이름이기 때문에 한 개문서에 속성값이 하나만 있어야한다.
Class는 같은 이름을 가진 속성값이 중복되어도 상관없다.
--이러한 선택자들은 같은 h태그가 여러 개일때 각각 다른 디자인을 적용하고 싶을 때 사용
4. attribute(속성) 선택자
html 타입(type)의 속성 값을 가지고 디자인을 적용하는 방법
ex) html : input type="text" placeholder="이름"
input type="password" placeholder="비밀번호" 일때
CSS : input[type="text"]{border: solid 10px red;}
input[type="password"]{border: solid 10px blue;}
캐스캐이딩
-
같은 태그에 다른 디자인을 주었을 때 가장 최근에 준 디자인(속성값)이 우선 / class가 있다면 class가 우선 / Id가 있다면 ID가 우선 /style이 있다면 style 우선
style 속성 > id > class > tag
html : h1 style="color: grey;" id="color-2" class="color-1">Hello World</h1
css : #id {color: blue;}
.class {color: purple;}
h1 { color: red;} (tag)
위 상황에서는 grey 색이 나옴
- 같은 상황일 때 더 디테일하게 주어진 것이 우선 순위가 높음
#intro div h1 {color: green;}
#intro h1 {color: blue;}
같은 명령이지만 위 명령이 div라는 디테일이 추가되었다.
CSS 기본설정
공간
- width와 height로 설정
- 크기를 px대신 %로 설정하면 창크기에 따라 공간도 같이 변경됨
- min-, max- 를 붙이면 가로세로의 최소, 최대 크기를 설정가능하다.
- border를 적용하면 테두리가 생긴다.
- border-radius : 모서리의 굴곡을 설정
글자
- 색상변경시 단어/색상코드/RGB번호 등으로 변경가능
- font-size : 폰트 크기 변경
- font-style : 폰트 스타일 변경 ex) italic, initial
- font-family : 폰트 서체 변경 / 여러개 서체 입력 가능( 사용 가능한 폰트 먼저 표기) *sans-serif는 모든 브라우저에 호환
- google font에서 폰트 가져올 수 있음 - 링크를 복사하여 head 부분 css 링크 밑에 붙여넣기하기
- font-weight : 폰트 굵기 설정
- text-decoration : 글자에 줄 넣기 ex)underline, line-through
다른 글자에 넣고 싶지 않다면 다른 항목에서 none이라고 설정 - text-align : 글자 정렬 /left, right, center
- color : 글자 색 설정
리스트 스타일
ul li 에서 앞에 표시되는 표시를 설정
list-style: none;으로 설정
opacity : 투명도 설정 - 0~1 (1로 갈수록 투명)
CSS에서 이미지 넣기
-
background-image를 사용
-
background-image: url(icon.png); / 이때 url은 css파일과 같은 폴더안에 있어야한다.
-
이때 설정한 넓이 보다 사진 크기가 작다면 반복해서 나타나는데 이를 제어하는 것이 background-repeat이다.
4.background-repeat: ㅇㅇㅇ;
repeat-x : x축으로만 반복
repeat-y : y축으로만 반복
repeat : x,y축 두 방향으로 반복
no-repeat : 반복효과 없음 -
background-position : 이미지의 위치 조정(top, bottom, center, left, right,right top, right bottom... etc)
* html(img=src)과 css(background-image)에서 이미지 삽입 차이
- html에서는 크기를 자유롭게 설정가능 그러나 css는 기본 깔린 틀에 따라 사진이 잘릴 수도 있고 틀에 비해 사진이 작을 수도 있다.
- img태그는 정보를 가지고 있다. bgi는 alt가 없어 정보를 담을 수 없다.
2. 학습 내용 중 어려운 점
오늘은 이해안가는 부분은 없었다.
복습이 필요하다.
3. 해결 방법
복습 열심히 하기
4. 학습 소감
복습하기가 좀 귀찮긴하지만 해야한다.
