코딩성장스토리

css 도전기 본문

프론트 엔드/html&css

css 도전기

까르르꿍꿍 2021. 9. 18. 15:54

css가 나오게 된 계기는 태그의 한계성이다 기본적으로 css는 <head> 태그 중간에 <style>태그를 넣는다

예전에 html <font>태그로 매 줄마다 변경을 했다면 css는

<style>

a(선택자){

color(속성):red(값); →선언문

}

</style>

이런 식으로 손쉽게 가능하다 즉 css로 인해 유지보수와 효율성이 대폭 증가한다.

css와 html 코드를 구별하기 위해서 앞에 style을 붙이는 약속을 한다

ex?<li><a href="2.html" style="color:red">2.css</a></li> → 스타일 속성

속성

text-decoration :글자 꾸밈 예를들어 밑줄을 치는거

color :색깔

font-size : 글자크기

text-align: 글자 위치

​

​

class속성으로 그룹으로 묶을수 있고 이를 css style를 이용하여 설정할때

선택자 에 .을 붙여야한다 또 id 속성으로도 선택자를 만들수 있다(이를 사용하는 이유는 class로 묶으면

단어가 겹칠경우 의도하지않게 작동될수 있다 . ex)class="saw" 와 class="saw active" 가 있을때 선택자를 saw를 쓸경우 둘다 선택이 된다. 선택자는 띄어쓰기로 구분이 되기때문이다.)

아무튼 id선택자는 앞에 #을 붙인다. (id는 중복될수 없다)

그리고 선택자 끼리도 우선순위가 있다 태그 선택자<class선택자<id선택자 이며 동일한 우선순위일경우 뒤에나온게 결과값이 된다(겹칠경우).

ex)<style>

a{

color:red;

text-decoration:none;

}

.saw{

color:grey;

}

#active{

color:red;

}

h1 {

font-size: 45px;

text-align: center;

}

</style>

</head>

<body>

<h1><a href="index.html">web</a></h1>

<ol>

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

<li><a href="2.html" class="saw" id="active">2.css</a></li>

<li><a href="3.html">3.javascript</a></li>

</ol>

박스모델

border:굵기 스타일 색상 (테두리 삽입 ex) border-bottom(테두리 밑에만):50px dashed coral;

margin:40px 80px: border 테두리 그 밖 내용까지의공백

padding: border 테두리와 그 안 내용까지의 공백

width 블럭너비

​

​

dispay:block 화면전체 크기 (h1태그는 기본적으로 블럭 크기임)

display:inline : 코드 그 칸만 크기

​

그리드 레이아웃

<div> 태그 아무런거 없이 디자인 용으로 사용 블록크기 갖음

<span>태그 아무런거 없이 디자인 용으로 사용 인라인크기 같음

<div id="grid">

<div>navigation article</div>

<div>article</div>

</div>

<Style>

#gird{

border:5px solid pink;

display:grid;

grid-template-columns

rows :150px 1fr; grid선택자들의 내용을 가로 세로로 넣게해줌

}

</style>

이 그리드는 디자인용으로 많이 이용하고 있음

​

선택자 부모자식 둘다올수 있음

ex)#grid ol{} - grid 선택자 중에 ol인것

미디어 쿼리

화면크기에 따라 다르게 작동하게 해준다

<style>

div{

border:10px solid green;

font-size:60px;

}

@media(min-width:800px){ - 화면이 800 이상이면 아래 내용 실행

div{

display:none;

}

}

</style>

​

​

코드의 재사용

ex)<link rel="stylesheet" href="style.css"> -style을 하나의 파일로묶고 저장한다음 이 link를 이용하여 매 사이트마다 넣으면 모든 페이지를 수정할 필요없이 style.css만 고치면 수정이된다 . 즉 매우효율적으로 변할수 있다.

​

​

​

여기까지가 css의 배운점이며 css를 배우며 html로는 해결이 안되는 것들에 궁금한것들이 해결이 되었으며 이 css는 중복의 수를 줄이게 해준 대단한 것인걸 알게 되었다.

css짱

'프론트 엔드 > html&css' 카테고리의 다른 글

html 두번째 도전기  (0) 2021.09.18
html 첫번째 도전기  (0) 2021.09.18
'프론트 엔드/html&css' Related Articles more