💡 25-06-30 (월)
이번주도 화이팅 🔥
CSS
: 웹 페이지에 디자인과 스타일을 적용할 때, 스타일이 계단식으로 순서 있게 적용된다는 뜻
🟰 Cascading Style Sheets
Cascading : 스타일이 계단식으로 적용되는 순서
Style Sheets : 스타일을 정의해 놓은 문서
HTML만으로는 웹페이지를 완성할 수 없다
(내용만 있을 뿐, 스타일이나 색깔, 크기 같은 디자인 요소 ❌)
▶️ HTML에 스타일을 적용하고 색을 입혀주는 역할을 하는 것이 바로 CSS이다
🔴 h1(선택자)는 HTML에 작성된 h1 태그를 선택해 꾸미겠다는 의미다
⚫️ color(속성명)는 무엇을 바꿀지 나타낸다
🔴 blue(속성값)는 속성명에 어떤 값을 적용할지를 적어준다
▶︎ h1에 파란색을 적용하겠다 !
CSS 적용 방법
✅ 인라인 스타일 (Inline Sytle Sheet)
: HTML 태그 안에 직접 스타일을 작성하는 방법
원래는 'h'으로 열고 '/h1'으로 닫히지만 여기에 style 속성을 추가해 태그 안에서 바로 스타일 값을 지정할 수 있다
코드를 간단하고 빠르게 적용할 수 있다는 장점이 있지만 HTML과 CSS가 한 파일에 섞여 작성되기 때문에 복잡한 스타일을 적용할 때는 비효율적이다
☝️ 특정 요소만 다르게 꾸미거나 테스트용으로 많이 사용된다
✅ 내부 스타일 (Internal Sytle Sheet)
: HTML 안에 style 태그를 작성해 그 안에 CSS 코드를 작성하는 방법
타이틀 밑에 style 태그를 선언하고 그 안에 CSS를 작성해준다
하나의 HTML 파일 안에 스타일을 위쪽에 작성하는 방법이지만 이 방법은 규모가 큰 프로젝트에서는 많이 사용되지 않는다
➕ class로 지정된 이름에 스타일을 적용할 때는 앞에 .을 붙여서 작성해준다
✅ 외부 스타일 (External Style Sheet)
: CSS 파일을 따로 만들어 HTML에 연결하는 방식 (가장 많이 사용!)
HTML 파일을 만들고 CSS 코드를 작성한 별도의 CSS 파일을 생성해 HTML에 스타일시트를 연결해준다
Vs code CSS 실습
1️⃣ 인라인 스타일 (Inline Sytle)
2️⃣ 내부 스타일 (Internal Sytle)
3️⃣ 외부 스타일 (External Style)
div,h2를 'border:1px solid black;'로 영역을 잡았을때 가로영역을 모두 채운다 그게 display 블록요소라는거다 블록요소들은 가로 영역을 모두 채운다
display:none;을 넣어주면 div,h2 태그가 사라진다 영역까지 아예 사라짐
visibility:hidden;을 넣어주면 영역은 존재하지만 내용은 사라진다
inline 요소들은 영역만큼, 콘텐츠 사이즈만큼 딱 잡힌다
width,height 값을 넣어도 사이즈가 변하지 않는다
display inline 요소를 적용했을때 블록요소지만 옆으로 가서 함께 붙어지는 것을 볼 수 있다
또한, inline 요소에서 span inline에는 width, height 값이 적용되지 않았는데 display inline 요소에서는 사이즈가 잘 적용된다
그래서 줄바꿈 없이 나열이 가능하고, 사진이나 아이콘, 버튼들을 정렬할때 쓸 수 있다
인라인 요소와 블록요소가 있는데 레이아웃을 정렬함에 있어서 한계가 있다 왜냐면은 블록요소는 자꾸 밑으로 떨어지고 인라인 요소들은 옆으로 갖다 붙기만 하고 사이즈도 안 먹다보니까 한계가 있다 이러한 한계를 해결해주는것이 display 블록이다 이걸 사용해줌으로써 블록요소들은 옆으로 갖다붙고 인라인 요소는 사이즈가 잘 지정이 돼서 이만큼의 영역값을 가질 수 있게 된다
list-style: none;을 넣어주면 ul,li 썼을때 앞에 점(.)과 a태그라서 밑줄이 있었는데 이런 스타일들이 다 제거가 된다
{} 앞에 별()을 넣어주면 전역에다가 적용을 한다는 것이다
margin:0 8px; 여기서 0은 상하를 뜻하고, 8은 좌우를 뜻한다
margin:0 8px 2px 8px;은 상/우/하/좌를 뜻한다
inline-block에서 li들이 옆으로 가서 붙으면서 메뉴의 모양을 갖춰나가는 것이 핵심이다
display inline-block을 하는 순간 inline의 성격이 들어가면서 옆으로 딱 붙는 모습을 볼 수 있다
float:left; 잡은 곳에 float:left;를 작성하면 이미지가 왼쪽으로 가서 뜨면서 주변에 있는 요소(글자)들이 옆에 갖다 붙는다 (right도 마찬가지!)
clear:both;는 left, right를 그만한다고 흐름을 끊는다
margin:0 auto;에서 상하 margin 0과 좌우 오토를 뜻해서 자동적으로 중앙에 있게 해준다
