CSS 박스모델, MediaQuery, grid

hoje15v·2021년 9월 24일
0

HTML & CSS

목록 보기
1/13
post-thumbnail

출처 : 생활코딩 CSS

웹페이지에 CSS 넣는 방법

  1. style 태그 사용
  2. style 속성 쓰기

1. Style 태그 사용

ex) 글자 색을 바꾸고 싶을 때 head내에 css를 도입할 수 있다.

<head>
<style>
a{color : black;} 
</style>

위의 태그 의미 : a 즉 링크가 걸려있는 모든 글자는 검정으로 해라
중복된 코드를 단하나의 코드로 표현한다. 즉 중복의 제거 효과

color:black 를 효과, 선언(declaration)이라고 부 른다. 특정 구간에 효과를 준다는 의미에서.
a를 선택자(selector)라고 부른다. 효과를 누구에게 줄 것인지 선택한다는 의미에서. 중괄호{}와 함께 온다는 것 기억하기!

정리 :
a = selector
color : red = declaration
color = property(속성)
red = value(값)

2.Style 속성 사용

ex)여러 목록 중 하나의 목록 색 변화를 주고 싶을 때

<a href ="2.html" target="_blank" style="color:red">CSS</a>

style=""은 CSS언어 약속이다. Html속성이지만 그 값으로 반드시 CSS 속성이 나온다는 효과가 있다.
style 속성을 쓰는 경우 여기 바로 위치한 문자에게 효과를 줄 것이기 때문에 선택자가 필요하지 않다.

응용

ex) 링크에 있는 밑줄을 지우고 싶을 때

<style>
a{text-decoration : none;}
</style>

ex)특정 링크 구간만 예외적으로 문자를 유지하고 싶을 때

<a href = "2.html" ; style = "color:red"; "text-decoration:none">CSS</a>

CSS 속성 스스로 알아내기

ex) h1 안의 글자 더 크게 알아내고 싶을 때
->css text size property 라고 검색 가능

h1{font-size:50px;}

ex) 가운데 정렬을 하고 싶을 때
-> css text center property

h1{text-align:center;}

ex)이미 확인한 목차를 회색으로 표시하고 싶을 때

<li><a href ="html.1" class="saw">HTML</a></li>
<li><a href ="html.2" class="saw">CSS</a></li>

class=""는 html의 속성. grouping 한다는 의미에서 class라고 써줌.
그리고

<style>
.saw{color:grey;} </style>

꼭 saw라는 class 앞에 점(.)을 붙여주어야 class로서의 역할을 할 수 있다.

주의사항) style 태그내에 명령들은 나중에 나온 명령 순으로 효과가 나타난다.
앞에 있는 명령어를 우선순위로 두고 싶다면 id를 사용할 수 있다.

<li><a href ="html.2" id="active">CSS</a></li>


<style>
#active{color:red;}

id="active" : id가 active인 곳을 찾는다. id 값은 단 한 번만 등장함.
id이름 앞에는 #을 붙여주어야 한다.

-> id 선택자 > class 선택자 > tag 선택자

박스모델

block level element : h1과 같이 전체 칸을 사용하는 태그들
inline element : a와 같이 글자 있는 부분만 공간을 차지하는 태그들

ex)박스 만들기

h1{border-width : 5px;
border - color : red;
border - style : solid;
display : inline;}

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

더 간단하게 할 땐,
h1,a{border:5px solid red;}

간격을 더 주고 싶고 크기를 바꾸고 싶을 때
h1,a{border:5px solid red; padding:20px; margin:20px; width: 10px;}


display : none -> tag 사라지게 함
display : block -> 박스크기를 칸 전체 차지하고 싶을 때
display : inline -> 박스크기를 인라인 만큼 바꾸고 싶을 때

box model 응용

ex) 제목 아래에 밑줄을 주고 싶을 때

<style>
h1{border-bottom: 1px grey solid;}
</style>

여백 등 위치가 애매할 때 마우스 오른쪽 커서 -> 검사 check!

<style>
h1{border-bottom: 1px grey solid; 
   margin:0; padding:20px;}
</style>

ex) ol 오른쪽 선을 만들고 싶을 때

<style>
ol{border-right: 1px grey solid;
   width: 100px;} </style>

선을 더 가까이 하기위해 width:100px를 추가함.

제목 아래의 밑줄과 ol오른쪽 선 사이의 간격을 좁히려면 -> margin:0; 추가
글자와 border간의 간격을 주려면 -> padding:20px;
제목 아래의 밑줄 화면을 꽉 채우고 싶을 땐 -> body{margin:0;}

Grid

ex) ol 태그 안의 글들과 p 태그 안의 글들을 같은 층에 놓고 싶을 때
div태그와 id = grid 이용하기
div태그(block level element) : 아무의미 없음. 오직 디자인을 위한 태그. 비슷한 태그로 Span태그(inline element)가 있다.

<div id = "grid">
<ol>
html
css
javascript
<div id = "article">
<p>
html is ~~~
</p>
</div>
</div>

이렇게 두 구간을 <div>로 구분을 해준다. 
이 후
<style>
#grid{display: grid;
	grid-template-columns : 150px 1fr}</style>
    
p태그 왼쪽 구간 여백을 주고 싶을 때
<style>
#article{padding-left:20px;"}

ol태그 왼쪽 구간 여백을 주고 싶을 때
#grid ol{padding-left:33px;}
조상이 grid인 것 중 ol이라는 의미이기 때문에 앞에 #grid를 써주는 것이 좋다.

*꿀팁! grid와 같은 태그들 현 문서에서 사용할 수 있는지 확인하고 싶을 땐
caniuse.com 들어가서 검색가능! ****

미디어쿼리 MediaQuery

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

ex) 스크린이 800px이상일 때 div 태그 내 부분 사라지게 하고 싶을 때

@media(min-width:800px){div{display:none;}}

ex) 스크린이 800px보다 작을 때

@media(max-width:800px){div{display:none;}}

ex) 스크린이 800px 이하일 때 grid 효과를 없애고 ol의 오른쪽 보더를 지우고 싶고 h1아래 밑줄을 지우고 싶을 때

@media(max-width:800px){#grid{display:block;}
                       h1{border-bottom:none;}
                       ol{border-right:none;}}

CSS코드의 재사용

CSS코드의 중복을 피하고 싶을 때,
style.css 라는 new file을 만든 후 style태그 내의 코드들을 style.css파일로 옮긴다.

그리고 본문에 link태그를 이용하여 다음과 같이 적어준다.

<link rel="stylesheet" href="style.css">

rel : the relationship between the current document & the linked document

profile
A front web developer & passionate learner loving learning new things and working together with people🦋

0개의 댓글