[TIL] HTML&CSS (09.09)

👩‍💻 CSS 기본

🔎 css란?

Cascading Style Sheets는 html로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어다.

css는 웹 페이지에 스타일과 레이아웃을 적용할 때 사용한다.

ex) 글꼴, 색상, 크기를 조절, 콘텐츠의 간격을 조절할 때

 

🔎 html에 css 추가하는 방법

1. html 문서에 직접 추가하는 방법(inline)

<style> 스타일 요소들 </style>

 

스타일을 추가하고 싶은 부분에 스타일 태그를 쓰고, 안에 스타일 요소를 적는다.

하지만 이 방법을 사용하면 문서의 길이가 무작정 길어질 수 있어 가독성이 떨어지기 때문에 유지보수가 힘들다는 단점이 있다.😂

 

2. html 과 css 를 분리(external)

<link href = "name.css" rel = "style sheet" />

 

html과 css를 분리하고 css문서와 연결한다. rel을 사용해서 name.css와의 관계를 명시한다.

이렇게 하면 스타일 요소를 한 문서에서 볼 수 있기때문에 나중의 내가 덜 고생한다!

추천하는 방법👍

 

🔎 css의 특징

css는 가장 마지막에 작성된 것이 적용된다!

이게 무슨말이냐면

body{
	bgcolor: blue;
    }

body{
	bgcolor: black;
    }

 

예를들어 이렇게 작성되어 있다면 body의 배경색은 black이 된다는 것이다!

 

html과 css가 분리되어 있어도 stylesheet 링크 아래에 새로 스타일을 작성한다면, 새로 작성한 스타일이 적용된다. 주의하기👏

 

🔎 css 작성법

selector {
	  property : value;
          }

 

css 코드는 이런식으로 생겼다. 정말 간단하다.

우리는 여기서 수많은 property를 적용할 수 있다.

하지만 모두 외울필요는 없다🙅‍♀️ 필요할때마다 구글링하면된다!

 

🎓 기본 선택자들

* {
  margin: 0;
  padding: 0;
}

 

*  : 전체 요소를 대상으로 한다.

 

# id {
	width: 150px
    	heigth: 150px
    }

 

# : id를 대상으로 한다.

 

.class {
	color: blue;
    }

. : class를 대상으로 한다.

 

(일단 오늘 배운건 이렇게 세개다. 앞으로 더 추가해야겠다!)

 

🔎 block 과 inline

css요소는 두가지 형태가 있는데, block 과 inline 이다.

 

block: 높이, 너비를 가질 수 있고 옆에 아무것도 오지 않는다.(inline인 것들을 알아두는것이 더 좋다고한다..🥲)

inline: 높이, 너비를 가질 수 없다. (ex. span, a, image)

 

🔎 margin, padding과 border

 

margin, padding, border를 설명하기 위해 캡쳐했다.

1. margin: box의 border로부터 바깥쪽에 있는 공간

2. border: 경계

3. padding: border안쪽의 공간

(이것에 대한 설명은 추후 자세히 작성하겠다)

 

🎓 margin 작성시 유의사항

# menu {
	margin: 10px;
    }

# korean food{
	margin: 10px, 20px;
    }
    
#chinese food{
	margin: 10px, 20px, 15px, 25px;
    }

 

margin 을 작성할 때, 입력값의 갯수에 따른 변화

1개: 상하좌우 모두 적용

2개: 상하, 좌우 순으로 적용

4개: 상, 우, 하, 좌 순으로 적용

 

 

👉 소감

오늘은 css를 배웠다!

어제 만들어놓은 html 뼈대에 css를 조금씩 입혀보고있다.

확실히 예뻐지고 있는 내 웹사이트를 보며 조금 뿌듯했다👏

아 그리고 작심삼일을 넘겼다!! 이제 꾸준히 할 일만 남았다!

블로그를 쓰니 공부 기록도 남고 쌓일수록 뿌듯한 느낌이 들고있다. 블로그 쓰기 정말 잘한것 같다.

내일도 열심히 해야지!

 

(혹시 틀린 정보 발견하신분 댓글 남겨주시면 정말 감사하겠습니다!

여러분의 도움이 작은 뉴비 개발자에게 큰 힘이 됩니다❤️)