22.9.10 생활코딩 css 강의 2번째 공부시간 css박스모델과 그리드를 배웠다.

<오늘 배운 것!!>

 

1. 아톰 프로그램에서 html -> 엔터 하면 hyml의 기본적인 코드가 나옴.

 

 

 

 

 

1-1. style 엔터 하면 스타일 기본 코드 나옴.

 

 

 

 

 

3.   h1{
        border-width:5px;
        border-color:red;
        border-style: solid;
      }

a{
        border-width:5px;
        border-color:red;
        border-style: solid;
      }

= h1, a 태그 전부 테두리에  5픽셀의 빨간색의 단선 긋는 방법이다.

그런데!!!! 중복이 있네요. 이 코드를 압축하면?

 

 

 

 

1차 압축

  h1, a{
        border-width:5px;
        border-color:red;
        border-style: solid;
      }

 

2차압축

h1, a{
        border:5px solid red;
      }

 

(순서는 중요하지 않음)

 

 

 

 

 

 

 

4. /*

 

*/

= css 에서 주석 넣는 법

 

 

 

 

 

 

 

5. 화면 전체를 차지하는 태그 = block level element

 

 자기 자신의 크기만 차지하는 태그 = inline element

 

 

 

 

 

 

 

 

6. display:inline; 

= 블럭레벨 태그를 인라인으로 바꾸기.

 

 

 

 

 

 

7. display:none;

: 태그를 안보이게 하고싶을때. (언젠가 중요할 때가 온다네)

 

 

 

 

 

 

8.   블럭레벨 태그의 테두리 크기를 줄이고 싶을 떄

=
        width:100px;

 

( 100은 예시이고 픽셀 조정)

 

 

 

 

 

 

 

9, 페이지에서 오른쪽 클릭-> 검사-> 태그 선택-> 스타일 

클릭하면 이 태그가 어떤 css 스타일의 영향을 받고있는가를 보여준다. 중요기능

 

어떤 하나의 태그가 어떤  css의 영향을 받는지 보기 좋은 도구

 

 

 

 

 

 

 

 

 

10.  

{

border-bottom:1px solid gray;

}

= 테두리 아래에 1픽셀의 단선 회색 줄 긋기 (바텀을 빼면 상하좌우 다 테두리 생김)

 

 

 

 

 

 

 

 

11.  {padding:20px;) = 글자와 테두리의 간격을 20픽셀만큼 벌리기

 

이어서 수정해야지

 

 

12. li {
  border-right:1px solid gray;
}

= li 태그 (리스트) 오른쪽에 세로선 추가 

 

 

 

 

12-1. li {
  border-right:1px solid gray;
  width:100px
}

= li 태그가 블럭태그라 세로선이 너무 오른쪽에 있으니까 폭을 조정해서 왼쪽으로 옮겨주기.

 

 

 

12-2. li {
  border-right:1px solid gray;
  width:100px;
  margin:0px;
  padding:20px;
}

= 세로선이 가로선과 약간 떨어져있어서 킹받으니까 마진 0으로 해서 딱붙여주고 

그건 해결했지만 약간 너무 지들끼리 따닥따닥 붙어있는게 킹받고 거슬리니 패딩값을 줘서 거리 떨어뜨리기 

 

 

 

 

13(12-3) . body {
  margin:0
}

= 가로선이 킹받게  가  테두리에 딱! 안붙고 약간 떠있어서 개발자도구를 봤더니 바디에 마진값이 있어서 그렇군요   딱붙여주기위해 바디값을 0 줘버리기

 

그리드에 대해 배운 것 (음.. 중간중간 css내용도 있는듯)

 

 

 

1. <div>~</div>

= 아무 의미 없이 디자인적 용도로만 쓰는 태그.

(기본적으로 블럭레벨 엘리먼트이다.)

 

1-1. 똑같은 용도로  디자인 용도로만 쓰는 태그2

= <span>~,</span>

 

but~!!!!!!!!!!!!! span 은 인라인 태그다!!!!

 

 

 

 

 

 

2.  그리드를 알아보기 위해서 각각의 태그의 부피감을 확실히 알필요가 있다 

 

  div{
        border:5px solid gray;
      }

 

이걸 해주면 모든 div에 회색 테두리가 

 

 

 

 

 

 

2-1. <div>NAVIGATION</div>
  <div>ARTICLE</div>

 

이 코드를 돌려보면 화면에 저 두개가 총 두줄로 돼있음. 이 두 요소를 나란히 놓기 위해서 그리드를 쓸 것이다. 

그러기 위해서 저 두개의 태그를 감싸는 부모태그 필요.

 

<div>
    <div>NAVIGATION</div>
  <div>ARTICLE</div>
</div>

 

이렇게.

 

그 다음에 부모태그에 아이디를 줄게요, 

<div id="grid">
    <div>NAVIGATION</div>
  <div>ARTICLE</div>
</div>

 

이렇게 변했음. 아이디값은 아무거나 해도 됨.(그리드 저거)

그 다음 이 웹페이지에서 아이디값이 그리드인 태그에 대해서 핑크를 주기위해서 

 

 

<style>
      #grid{
        border:5px solid pink;
     }

 

이렇게 해주면..

이렇게..

 

위의 회색과 그리드태그만 선택한 핑크 둘다.. 

둘다 div인데 일케.. 아 힘들어 헉헉 

 

 

 

 

위에서 네비랑 아티클 하나의 컬럼에 배치하는 법

그리드 템플릿 컬럼스 : 백오십픽셀 일에프알;

=

뜻: 첫번째 컬럼은 네비게이션으로 하고 150 픽셀을 주고,두번째로 오는 아티클이라는 컬럼은 나머지 공간을 다 쓴다. 

 

이거 창의 가로 사이즈를 늘였다 줄였다 해보면  네비게이션은 150픽셀로 고정되고 아티클만 크기를 변경하며 움직이는걸 볼 수 있음.

 

 

 

2-2. 2fr 1fr;  로 한다면???!?

 

화면 전체 크기를 3이라고 가정하고 

네비를 2만큼 아티클을 1만큼 화면 전체를 쓰게 자동으로 조정된다.

 

 

2-3. 요롤때 그리드의 좋은점이 아티클이라고 하는 부분에 아무 글자나 ㅈㄴ 긴걸 넣어도 자동으로 커지도 네비게이션 태그도 자동으로 커짐.

 

이것이 바로 그리드~!~!!!!!!! 그리드는 최신기술이다.

 

 

 

 

 

*아주 유용한 사이트 : 최신 기술을 사용하려할 때 그 기술을 현재 사용해도 되는지 안되는지 데이터에 근거해서 판별하기 위한 사이트 : caniuse

= 현재 그 기술이 웹사이트에서 얼마나 채택하고있는지  보여주는 서비스임.