간단한 요약
css 관련 기본을 배우는 시간이다. css에는 워낙 다양한 기능이 많기 때문에 이전에 보지 못한 내용들도 많았다.
배운 내용
style.css 연결
link태그 사용 시rel="stylesheet"속성은 연결되는 파일의 형태를 알리는 역할type="text/css"속성은 연결되는 파일의 text는 css형식임을 알려줌
css inherit
- parent 요소의 css 특성은 children에게로 넘어간다.
- 하지만 그 자식만의 css 특성이 따로 있다면 inherit된 특성은 덮어 씌워지게 된다.
- 몇몇 태그(Ex:
a태그)에는 parent의 특성이 inherit되지 않는 경우가 있다
몰랐던 css 추가 방법
input[type="text"] { border: 2px solid blue; }와 같이 추가 가능
Cascading
- 어떤 css 설정이 먼저 적용되는 지, 즉 우선순위에 대한 것
- 코드들은 위에서 아래로 처리가 되기 때문에 같은 성질의 코드라면 아래에 있는 코드가 마지막으로 처리되어 적용됨 즉, 이전의 코드는 무시됨
tag<classclass<id<h1 style="xxxxxx"></h1>>id- 반면, 같은 대상을 가리킨다고 하면 더욱 디테일한 css 명령이 우선순위를 가진다.
#intro div h1 {}>#intro h1
다양한 css 속성
%단위를 사용하였을 때, 이는 parents가 기준이 된다.min-width, max-width와 같은 속성은 기준이 되는 속성과 함께 자주 쓰인다.font-family를 적용할 때, 마지막은 늘sans-serif로 지정하자. 대부분의 브라우저에서 지원하는 서체이기 때문- google font를 통해 새로운 서체를 추가할 경우 css link 태그의 위에 추가하기
text-decoration: underline;과text-decoration: line-through;이 자주 사용
a { text-decoration: none; }으로 default 밑줄을 제거할 수 있다.text-align의 사용은 해당 태그의 영역에서만 움직임. 해당 영역은background-color로 쉽게 확인 가능list-style: none;으로ul태그의 default 동그라미 표시를 제거
img 그리고 background
background는 아래와 같이 image를 다룰 수 있는 유용한 기능이 많다.
#background {
width: 400px;
height: 400px;
background-color: yellow;
background-image: url(bike.png);
background-repeat: no-repeat;
background-position: center;
}-
background-image는 image가 사용되는 영역의 크기가 image보다 작을 경우, 해당 image는 액자의 틀을 벗어난 것처럼 잘린다. -
<img src="">는 사용되는 영역의 크기가 작더라도 image는 잘리지 않는다. -
정보를 담고 있는 image의 경우
<img alt="information">를 사용하여 웹접근성을 만족해야 한다.
어려웠던 내용
몰랐던 부분이 많았는데, 특히 img태그와 css의 background-image설정의 차이가 흥미로웠다. background-image의 경우 decoration의 개념이라고 설명하셨는데, 아직 진도가 많이 나간 상황이 아니라 후에 있을 강의에서 더 배울 수 있을 듯 하다.
해결 방법
위의 어려웠던 내용과 관련하여, MDN에서 관련 예시를 찾을 수 있었다. background-image를 이런식으로 편집 및 활용할 수 있다는 것이 흥미롭다. 이 예시를 통해 강사님이 언급하신 decoration 역할이란 것을 이해하였다.
소감
이전 css에 대한 강의는 깊이 들어본 적이 없어서 현재 진행되는 강의가 무척 유용하다. 몰랐던 부분이 꽤 많았으며 연습하기에도 흥미로운 주제들이었다. 후에 진행될 project들에 부드럽게 적용할 수 있도록 이런저런 연습을 해야겠다.
나의 코드
수업을 들으며 같이 진행한 코드는 github에 업로드하였다. 아직 이 수업이 완전 끝난 것이 아니기 때문에 다음 개발일지에 추가할 예정이다.
