생활코딩 CSS 공부기록 1편

1. 생활코딩 WEB2 - CSS  수강완료

생활코딩 CSS 수강완료했다. 공부한 내용을 간단하게 정리해보려고 한다.

 

 

2.  텍스트 가운데 정렬하기

 

스타벅스 <h1>를 가운데 정렬해주려고 한다.

style에서 text-align: center를 추가로 넣어준다. 

  h1{
  font-size :50px; text-align: center;
  }

 

 

3. 박스모델

 

<h1> 태그는 화면전체를 쓴다.

<a>태그는 화면전체를 쓰지 않고 자신의 크기의 부피만큼을 쓴다. 

 

이전 html 복습 중 변경하고 싶은 부분이 안되서 궁금증이 있었는데  이번강의에서 실행이 안됬던 부분에 대해 더욱 이해할 수 있었다. 

 

 

block level element : 화면전체를 쓰는 태그

inline element : 자신의 크기만큼 쓰는 태그  

 

 

 

blcok element을  inline element 으로 바꾸고 싶다면 display 속성을 이용해서 바꿀 수 있다.

 

 

4. 박스모델 &  그리드를 통한 화면구성

박스모델을 이용해 라인을 넣을 수 있다. (테두리 사용하기)

<div>로#grid를 통해 나란히 놓을 수 있다.

 

 

5. 미디어쿼리를 이용해 반응형 웹사이트 만들기 

@media 미디어쿼리를 이용해서 반응형 웹으로 만들 수 있다.

지정한 사이즈로 조절하면 화면에서 라인이 없어지는 등 세세하게 변경가능!

 

6. CSS 코드의 재사용하기

반복되는 css 코드를  하나의 폴더에서 관리할 수 있다. 너무 편한 것...

 

7. 소스 및 결과물

blogk, grid 개념과  magin padding 등 활용해서 화면구성 하는 거에 있어서 이해도가 조금 올라갔다. ㅎㅎ

 

 

03_css

https://github.com/wildtokkii/my-first-web.git

GitHub - wildtokkii/my-first-web

 

8.  마무리

공부한 것을 바로 그날 기록하는 습관을 들여야겠다. 나중에 기록하려니깐 힘들다..ㅎㅎ 

 

 

 

>> 생활코딩 HTML 공부기록 1편 보러 가기 <<

생활코딩 HTML 공부기록 1편

>> 생활코딩 HTML 공부기록 2편 보러가기 <<

생활코딩 HTML 공부기록 2편