WEB2 - CSS2

현정정·2024년 12월 3일

CSS 생활코딩

생활코딩

목록 보기

3/3

📌Box Model

Block Level Element : 화면전체를 쓰는 태그

ex) <p>, <div>, <span>, <h1>~<h6>, <ol> . . .

Inline Element : 자기 자신의 부피, 컨텐츠 크기만큼을 갖는 태그

ex) <a>, <button>, <img>, <strong> . . .

BUT!

display를 사용하여 바꿀 수 있다.
display : inline block -> inline
display : block inline -> block
display : none 사라짐

<style>
  h1 { 
  	border-width : 5px; /*테두리 두께*/
  	border-color : 색상; /*테두리 색*/
  	border-width : solid; /*일반적인 선*/
  	}
  a { 
  	border-width : 5px; 
  	border-color : 색상; 
  	border-width : solid;
  	}	
  </style>

⬇️ 위 코드를 아래와 같이 중복을 최소화 할 수 있다.

<style>
h1,a { 
	border-width : 5px; 
	border-color : 색상; 
	border-width : solid; 
	}	
</style>

⬇️

<style>
  h1,a { 
  	border 5px solid 색상
  	}	
  </style>

<style>
  ol {
    border-right: 1px solid gray; /*오른쪽에 선긋기(오른쪽,왼쪽,위,아래 가능)*/
  </styel>

padding : 숫자 -> 숫자만큼 테두리 간격
margin : 숫자 -> 숫자만큼 서로의 테두리 간격
width : 숫자 -> 숫자만큼 폭 변경

📌Grid

무색 무취의 태그
<div></div> 
<span></span>
grid를 사용하기 위해 두개의 태그를 감싸는 부모로 div를 한번 더 사용
id값을 준 후 display를 grid로 값을 준 후, NAVIGATION과 ARTICLE을 하나의 컬럼에 놓기 위해 grid-template-columns를 사용한다.

1fr은 화면을 2fr로 가정했을때 1fr씩 화면을 사용하는 것이다.

웹사이트에 출력은 위와 같다.(border는 영역을 확인하기 위해 사용했음)

grid의 장점

오른쪽의 텍스트가 많아짐에 따라서 NAVIGATION에 있는 태그도 따라서 함께 커짐

📌미디어 쿼리

반응형 디자인 : 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 동작하게 된다.

@media(min-width:80px){ /*화면의 크기가 800px보다 크면 없어짐*/
div{
	display:none;
   }
}
screen width > 800 -> min
screen width < 800 -> max
평소의 웹 페이지 ⬇️

@media를 적용하였을때 ⬇️

(왼쪽 위의 픽셀을 확인하였을때 800이상이 되면 화면에서 사라진다.)