-
HTML CSS 8일 완성하기 : 2일차 CSS의 기초카테고리 없음 2023. 2. 6. 21:20
강의는 여기
오늘은 섹션 3. CSS 기초에 대한 내용이었다.
확실히 기초부터 딱 잡고 넘어가니까 그동안 해왔던 것들에서 이렇게 수정하면 되겠구나 ~ 싶어서 기분이 좋다.
강의 다 들으면 북마크 웹앱 전체적인 수정에 들어가야겠다 🧑💻!!
그럼 오늘도 기록 시작~
시각적인 부분을 담당하는 CSS, 어떻게 연결할까?
연결하는 방법에는 총 세 가지의 방법이 있다.
하지만 마지막 방법을 제외하고서는 99.9퍼센트 사용하지 않는다고 봐야한다는 점을 먼저 짚고 넘어간다.
1. inline CSS
HTML 요소 안에 style 속성을 추가하여 원하는 스타일을 적용하는 방법.
🙅절대 사용하면 안된다🙅
코드는 자고로 분리해서 사용해야 미래에 수정, 추가 등 할 일이 있을 때 편하다.
혹시나 오류가 생긴다면 고칠 때도 훨~씬 편하다. style이 하나하나 다 추가 된 html 코드를 상상하면 머리가 아프다 ...
2. internal CSS
1번째 방법보다는 조~금 더 정리되어 보이는 듯한 방법.
html 의 head 부분에 style 을 추가하는 방법이다.
조금 더 정리된 듯 보이지만, 이 방법도 html 코드나 style 둘 중하나라도 길어지면 보기 힘들어지므로 추천하지 않는다.
* 3. external CSS *
css 파일을 따로 분리해서 관리하는 방법.
주의할 점은 html 이 이 css 파일을 인지할 수 있도록 꼭! 연결해주어야 한다.
head 부분에 link 요소를 사용하여 연결해준다. 이때 파일 경로를 틀리지 않도록 주의한다.
선택자?
CSS는 HTML에서 요소 타입 or id 이름 or class 이름을 선택하여 꾸며줄 수 있다.
1. html 요소
말그대로 요소의 타입을 직관적으로 가져오는 방법.
<h1>제목</h1> 이라는 요소의 텍스트를 빨간 색으로 바꾸자.
h1 { color: red; }이렇게 표현할 수 있다.
주의할 점은 html 안에 있는 모~든 h1 요소가 선택되어 스타일이 적용된다는 점이다.
내가 원하는 요소만 가져오는 게 아닐 수 있다는 말.
2. id 이름
html 요소에는 id 이름을 추가할 수 있다.
하지만 id 이름은 같은 html 페이지 내에 중복될 수 없고, 중복되지 않는 이름 딱 하나만 가질 수 있다.
<p id="text">블라블라블라</p> 의 텍스트 색상을 빨간색으로 바꾸자.
#text { color: red; }html요소와 id 이름 같은 경우 이러한 이유들로 인해 잘 사용하지 않는다.
css 선택자를 사용할 때는 기본적으로 class 이름으로 원하는 요소를 가져오도록 하자.
*3. class 이름*
html 요소에는 class 이름을 추가할 수 있다.
class 의 특징은 중복 이름을 사용할 수 있다는 점, 하나 이상 여러개 이름을 같이 사용할 수 있다는 점이다.
이러한 이점들로 인해 css에서 원하는 요소를 가져올 때 class 이름을 사용한다.
<p class="red-text">RED!!</p> 안의 텍스트를 빨간색으로 바꾸자.
.red-text { color: red; }추가로, 이후에 추가하거나 변경하고 싶을 때 만약 id, class 이름을 섞어서 쓰면 html 파일은 물론 css 파일도 다 같이 변경해야하는 번거로움이 생긴다. 심지어 이때 오류가 발생할 수도 있다!! 때문에 class 이름을 사용하는 것으로 통일하도록 하자.
📌 클래스 네이밍
클래스 이름을 지을 때에는 여러개의 단어로 이루어져있을 경우 '-'를 사용한다.
ex) redText ----> red-text
CSS 에 관한 이론?
✔︎ 같은 요소에 적용되는 css 규칙이 여러개일 때 어떻게 될까?
‼️ 기본적으로 모든 css 규칙이 적용된다.
하지만 같은 속성의 선언이지만 각자 담긴 값이 다르다면 무엇을 적용할까?
이때 중요한 게 바로 우선순위!
css가 우선적으로 적용하는 선택자 순위를 기록한다.
0. !important
가장 중요한 선택자. css 내 갈등이 생겼을 때 마지막 수단으로 사용한다. 보통 사용하지 않고 정말 마지막 수단이라는 느낌.
1. inline style
html 태그에 style 속성을 사용하는 것이다. 하지만 실제로는 사용하지 않기 때문에 그렇구나 하고 넘어가자.
2. id 선택자
3. class 선택자 혹은 의사클래스(가상클래스)
4. 요소 선택자(p, div, li ...)
5. * 선택자 (범용 선택자)원하는대로 스타일이 적용되지 않을 때 우선 순위를 생각하면 좀 더 쉽게 고칠 수 있는 경우가 많았다.
잘 기억해두자!
✔︎ * (범용 선택자) vs body
* (범용 선택자)
기본적으로 페이지 상의 모든 요소를 선택한다.
모~든 요소에 특정 속성이 적용되기를 원할 때 사용한다.
특히 초기화 할 때 많이 사용한다.
margin: 0;
padding: 0;
으로 모두 초기화한 후 차근차근 스타일을 적용시켜보자!body
body에 스타일을 적용한다고 해서 모든 요소 각각에 적용되는 것은 아니다.
하지만 예외가 있으니, 텍스트 관련 속성은 하위요소들에 전부 유전되고 상속된다.
✔︎ box model
웹페이지의 모든 요소를 박스로 본다.
그리고 그 박스들은 각자의 내용물, 테두리, 안팎의 공간이 있다는 것을 인지하자.
- content : text, image, ... etc
- border : 테두리. 박스 모델의 안에 위치한다.
- padding : 테두리와 콘텐츠 사이의 여백. 박스 모델의 안에 위치한다.
- margin : 박스 모델과 다른 박스 모델 사이의 공간. 박스 모델의 "밖"에 위치한다.
원하는 레이아웃에 따라 선택하여 사용하자.
📌 내가 생각한 여백과 다르다!
만약 같은 공간을 차지하는 여백이 두 개 일 때, 이 여백은 서로 합쳐지지 않는다.
둘 중 더 큰 여백만 적용된다.
예를 들어, 같은 공간에 한 쪽은 40px 한 쪽은 60px의 여백을 적용했다고 가정하자.
서로의 여백이 밀어내며 총 100px의 여백이 생길 것 같지만 실제로는 60px의 여백만 적용된다.✔︎ 다양한 유형의 box
1. inline
html 요소 안 콘텐츠만을 딱 맞게 담은 공간.
박스 모델의 특정 속성을 인라인 요소에 적용했을 때 작동되지 않거나 원하는 결과가 나오지 않을 수 있다.
예를들어 inline 요소에 padding을 추가해도 겉으로는 박스가 커지는 것으로 보이지만
실제로 자리를 차지하는 것은 아니라는 점이 block 요소와 다르다고 할 수 있다.
2. block
block 요소는 콘텐츠에 맞춘 공간이 아니라 한 줄을 전체 다 쓴다고 생각하면 편하다.
inline 요소는 한 줄에 여러개 사용할 수 있지만(물론 콘텐츠의 길이가 한 줄이 넘어간다면 얘기가 달라진다)
block 요소는 한 줄에 하나만 사용할 수 있다.
3. inline-block
inline과 block 요소의 장점만을 합친 inline-block 요소.
외관은 inline 요소처럼 보이기 때문에 한 줄에 여러개 사용할 수 있지만,
block 요소처럼 새로운 공간을 만들어서 그만큼의 자리를 차지하도록 만들 수 있다!
📌 어떤 요소든 원하는 box 형태로 바꾸는 방법
css 에서 display: block / inline / inline-block ... 원하는 형태로 바꿔보자!✔︎ 위치 설정
위치 설정은 position에 관한 이야기이다.
이건 저번에 공부한 적이 있기 때문에 그 링크를 남겨둔다.
📌 absoulte의 기준 (다시 한 번 강조!! 완전 중요!!)
absolute 위치 선정의 기준이 되는 건
position 이 relative인 가장 가까운 부모요소!
만약 기준이 되는 relative 부모 요소가 없다면
기준은 뷰포트가 된다.
뷰포트란 브라우저에서 페이지를 볼 수 있는 부분으로 전체 페이지를 뜻하지 않는다.
의사클래스 와 의사요소 ?
✔︎ 의사 클래스 (가상 클래스)
의사 클래스는 선택자에 추가하는 키워드이다.
선택자에 어떠한 상태가 충족되었을 때 발동되는 것으로 이해하자.
예를들어 :hover 라는 의사 클래스는 선택된 요소에 커서를 가져다 대면 원하는 스타일이 적용된다.
📌 :first-child / :last-child
.container p:first-child를 사용한다고 가정해보자.
class="container"인 요소(부모요소)의 많은 하위 요소들 중 가장 첫 번째 p요소를 찾는다.
라고 생각하기 쉽지만, 실상은 그렇지 않다.
class="container"인 요소의 가장 첫번째 자식 요소가 p일 경우 스타일이 적용되지만 그렇지 않을 경우 적용되지 않는다.
last-child의 경우에도 같다.
즉, 부모 요소 안에 자식 요소들이 통일된 요소가 아니라 다중 요소가 혼합되어 있다면 의사 클래스는 제대로 작동하지 않는다.
그렇다는 건 반대로 자식 요소들이 모두 통일된 요소들이라면 원하는대로 작동한다는 것! (ex. ul > 여러개의 li)
-> 이 경우, :first-child, :last-child는 물론 :nth-child(원하는 순서번, 홀수odd, 짝수even ...) 도 사용할 수 있다.✔︎ 의사 요소 (가상 요소)
의사 요소도 마찬가지로 선택자에 추가하는 키워드이다.
의사 요소로 선택한 요소에만 부분적으로 스타일을 적용하는 게 가능하다.
📌 재미있었던 건 ::after / ::before 라는 의사 요소!
::after 의사 요소로 예를 들면, 선택한 요소의 마지막 자식으로 요소를 생성한다.
기본값은 인라인 요소이고, 장식용 콘텐츠를 추가할 때 사용한다!
예를 들어 <p>오늘만 팝니다!</p> 라는 요소가 있다고 해보자.
여기에 파격세일 이라는 문구를 스티커처럼 붙이고 싶다할 때! 사용할 수 있다.
이런식으로! 정말 흥미롭다. 👇p::after { content: "파격세일!"; /* 기본적으로 인라인 요소이기 때문에 스타일 적용을 용이하게 하기 위해 inline-block으로 바꾼다 */ display: inline-block; /* 스티커처럼 쓰고 싶으니 position 변경 */ position: absoulte; /* 원하는 위치 설정 */ top: 0; right: -10px; /* 그외 등등 색상이나 폰트 컬러 변경 등등등 ... 원하는대로 꾸민다 */ }
그 밖의 ...
예제를 작성하고 도전하면서 이런 것도 있었구나 ... 하는 것들이 꽤나 많았는데 그것들을 기록!
🧑💻 line-height : 줄 높이
기본값은 1.
예를들어 1.5로 설정하면 요소의 font size의 1.5배 높이로 줄 높이가 설정된다.
🧑💻 font 의 기본 size는 16px
🧑💻 선택자에서 +는 인접한 형제자매 선택자! ex) h3 + p : h3 요소의 형제자매 요소들 중 p 요소가 있다면
🧑💻 a:link 는 href 속성이 있는 a 태그만 선택한다.
🧑💻 letter-spacing : 글자간 공백 주기
🧑💻 ::first-letter : 선택 요소의 첫 글자
2일차 후기 🍔
1. 그동안 난잡했던 나의 css
정리되지 않은 걸 보는 게 ... 너무 싫어서 그동안 내가 작성했던 css 코드들을 보면서 스트레스를 받아왔다.
근데 강의를 다 들으니까 수정하면 전보다는 훨씬 더 깔끔하게 쓸 수 있을 거 같다는! 자신감이 조금 생겼다.
2. 재미있다!
기초부분이라서 더 그렇게 느낄 수도 있지만, 모르는 게 많았다는 걸 확인 사살 당하고 ... 괴로웠지만 그걸 알아가는 과정이 너무너무 재밌다! 머릿속에서 어느정도 정리되는 기분도 정말 짜릿하다. 그리고 조금 더 .. 내가 원하는 대로 만들 수 있을 거 같다는 자신감이 생기는 것도 너무너무 즐겁다.