멋사 2주차

primav·2024년 7월 29일

CSS html 멋사

멋사

목록 보기

2/29

7/29 (월)

💡NVM
node 버전 매니저

Node의 모든 버전을 관리해주는 매니저로 내 컴퓨터에 저장된 node의 여러 버전 중 원하는 버전을 쉽게 사용할 수 있도록 해준다.

예를 들면 나에게 있는 노드 버전이 18버전 20버전이 있다면 프로젝트마다 사용되는 버전이 다를 수도 있다. 이 때 노드 버전을 관리해주는 nvm을 사용하면 쉽게 사용이 가능하다.

CLI

💡CLI
Command Line Interface (명령줄 인터페이스)

디렉토리 생성 및 이동, 복사, 이름 변경, 삭제 등을 미리 약속된 명령어를 사용하여 실행하는 환경이다.

컴퓨터와 미리 약속된 명령어를 사용하여 채팅을 한다고 생각하면 된다!

1. 현재 작업중인 폴더 확인

pwd : print working directory

현재 작업중인 폴더의 절대경로가 출력

2. 폴더 생성

mkdir : Make Directory

mkdir {디렉토리 이름}

mkdir Frontend: 현재 폴더에 Frontend폴더를 생성

3. 디렉토리 이동

cd : change Directory

cd {디렉토리 경로}

cd . - 현재 디렉토리 (생략 가능)
cd .. - 상위 경로로 한 단계 이동
cd ../.. - 상위 경로로 두 단계 이동
cd ~/Desktop - 데스크탑 디렉토리로 바로 이동

4. 디렉토리 및 파일 목록 출력

ls : List Segments

ls {디렉토리 경로}{옵션}

ls ~/Frontend/assets : Frontend/assets 폴더의 하위 폴더 목록을 출력
ls -l ~/Frontend/assets : 폴더 목록을 출력할 때 사용 권한, 소유자, 그룹, 크기, 날짜 등 상세 정보를 함께 표시
ls -a ~/Frontend/assets : 폴더 목록을 출력할 때 숨겨진 항목을 포함하여 모든 내용을 출력
ls -al ~/Frontend/assets : 폴더 목록을 출력할 때 숨겨진 항목을 포함하여 사용 권한, 소유자, 그룹, 크기, 날짜 등 상세 정보를 함께 표시

5. 파일 생성

touch : 빈 파일을 생성할 경우

echo : 간단한 내용이 들어있는 파일을 생성할 경우

$ touch index.html: 내용이 없는 빈 index.html파일 생성

$ echo 'let me = "Frontend Developer"' > js/index.js

 js 폴더안에  `let me = "Frontend Developer"` 라는 코드가 삽입된  `index.js`파일 생성

6. 파일 내용 확인하기

cat : Concatenate

cat js/index.js : index.js파일의 내용을 화면에 출력
cat index.js app.js : index.js파일의 내용으로 app.js파일 내용 덮어쓰기

7. 파일/(비어있지 않은)디렉토리 삭제

rm : Remove

rm {제거할 파일/디렉토리 이름}

rm index.html : index.html파일 삭제
rm -r js : js폴더 내부 하위 디렉토리까지 모두 삭제
$ rm -rf assets : assets폴더 안의 하위 디렉토리까지 모두 삭제하되, 경고를 나타내지 않음

8. 디렉토리 제거

rmdir : Remove Directory

rmdir {제거할 디렉토리 이름}

$rmdir js: js 폴더 삭제

9. 파일/디렉토리 이동 및 이름 변경

mv : Move(이미 존재하는 파일/디렉토리의 경우 이름 변경이 가능)

mv index.html views/index.html: index.html 파일을 views폴더로 이동
mv js/index.js js/app.js :js 폴더에 있는 index.js 파일명을 app.js로 변경

10. 파일/디렉토리 복사

cp : Copy

cp index.html main.html:index.html파일을 동일한 폴더에 복사한 후 파일명을 main.html 로 변경
cp index.html views/main.html :index.html파일을 views 폴더에 복사한 후 파일명을 main.html 로 변경

Git

💡git
버전의 변경점이 관리된다
➡️ 버전 관리

이 단계를 거쳐서 파일의 버전 변화가 진행된다.

실제로 저장되는 것이 아니다. 어떤 파일이 수정되었을 때 수정된 상태로 있도록 한다.
파일을 개별적으로 관리할 수 있다.

메세지가 기록된 새로운 버전이 생기면서 각 파일이 사라지는 것이다.
하나의 버전으로 묶어서 관리할 수 있다.

버전의 변경점이 관리된다
➡️ 버전 관리

7/30 (화)

Git 파일 init

커밋 메시지 작성할 때 앞에 꼭 prefix(접두사)를 붙이면 좋다.
ex) modify: login
❗️기능 구현 뿐만 아니라 문서화하기!

이건 내가 예전에 많이 했던 실수인데 주의해야한다.
ls를 진행하면 폴더 속 모든 폴더의 list를 보여준다. 이 때 git init은 하위 폴더에만 진행 해야한다.
루트 폴더에 진행하면 절대 안된다! (이래서 예전에 에러 많이 떴었음 ㅠㅠ)

이렇게 진행하고 ls -a를 하면 모든 리스트를 보여줘서 git파일 까지 확인할 수 있다.

잘못해서 루트에 git init을 진행했다면 ls -a로 어디에 git이 들어갔는 지 확인한 후 rm -rf .git 으로 삭제하면된다.

❗️rf를 사용해서 삭제할 때는 주의해서 하기 (다시 되돌릴 수 없음)

✔️루트에 git init을 적용한 사진
이렇게 하면 안됨

❗️github에서 레포지토리 만든 후 vscode로 넘어오면 메인 브랜치 이름이 mai인데 vscode에서 레포지토리를 만들면 메인 브랜치 이름이 master이다.

7/31 (수)

실습 과제 풀이

레이아웃 나누기 먼저!(가장 큰 것부터)

❗️ 인라인 요소일 때 ypgs 등과 같이 길이가 긴 문자들을 위해 아래에 여백이 생기는 경우가 있다. 밑 사진에서는 여우 그림과 CONTENTS 사이에!

❗️이걸 크롬에서 확인해보면 사용자 에이전트 때문에 생기는 마진이 아니다.

💡 해결방법
1. display: block;
2. vertical-align: top; // css reset파트에 넣어야 함

스타일 초기화

💡 unset
브라우저가 상속을 파악해서 자동으로 inherit, initial 지정해줌

✔️ before

body,
p {
  margin: initial;
}

h1 {
  margin: initial;
  font-size: inherit;
  font-weight: inherit;
 }

✔️ after

body,
p {
  margin: unset;
}

h1 {
  margin: unset;
  font-size: unset;
  font-weight: unset;

unset을 사용하면 브라우저가 상속 여부를 알아서 판단해주기 때문에 더 간편하게 초기화를 진행할 수 있다.

예를 들면 폰트 사이즈는 상속이 되는 속성이므로 h1에 font-size: inherit을 진행하면 밑에서
.content { font-size: 16px } 로 콘텐츠 클래스 안의 모든 요소에 일괄적으로 폰트 사이즈를 지정해도 h1의 사이즈는 변하지 않는다.
.content h1 { font-size: 16px } 이렇게 직접 h1에 지정해줘야 바꿀 수 있다.
이러한 번거로움을 막기위해 font-size: unset으로 스타일을 초기화 하면 브라우저에서 알아서 폰트 사이즈를 상속하지 않도록 지정해준다. (?)

`:root`

:root {
	font-family: 'arial'
}

💡 :root
html을 의미한다.

모든 요소에 일괄적으로 스타일을 적용하고 싶을 때 사용하면 된다.

`background` vs `img`

중요한 의미를 가지고 있다고 생각되면 img 태그 사용
ex) 여우 사진
중요한 의미를 가지고 있지 않다고 생각되면 background 사용
ex) 잔디 사진

✔️ before

 	<div class="wrapper">
      <img src="./animal07.png" class="fox" />
      <img src="./green.png" class="green" />
      <div class="description">
        <h1>Fox</h1>
        <p>

✔️ after

  	<div class="wrapper">
      <img src="./animal07.png" class="fox" />
      <div class="description">
        <h1>Fox</h1>
        <p>        

css
.description { background-image: url(./green.png) }

`wrapper`

그렇다면 img, h1, p 등등 그냥 각 요소를 적고 각각 가운데 정렬을 하거나 하면 되는데 왜 wrapper로 한번 감싸는걸까?
➡️ 확장성!

이렇게 하면 밑에 어떠한 요소를 추가하고 싶을 때 wrapper에 바로 추가할 수 있어 더욱 용이하다.

유지 보수

height의 고정 높이를 사용하지 않고, auto를 적용함으로써 새로운 내용을 추가하더라도 그 밑에 계속 깔리도록 한다.

8/1 (목)

`Class`

<div>
  <div class="item">RED</div>
  <div class="item">ORANGE</div>
  <div class="item">BLUE</div>
</div>

div.item
div이면서 item 인것

ex)홍.길동 --> 홍씨 성을 가지면서 이름은 길동이다.
홍길동 이렇게만 부르지 않고 길동이라고도 부르듯이 div.item도 .item으로도 표시할 수 있다.

<div>
  <div class="item">RED</div>
  <div class="item">ORANGE</div>
  <div class="item">BLUE</div>
</div>

.colors .item
모든 아이템이 아니라 한번 필터링을 거쳐 colors 하위에 있는 아이템만 골라서 스타일링 한다.

👀 그러면 나머지 스타일은 다 똑같은데 (배경 색, 마진, 패딩 등) 글자 색이나 몇가지의 요소만 바꾸고 싶으면 어떻게 해야할까?

<div>
  <div class="item red">RED</div>
  <div class="item green">ORANGE</div>
  <div class="item blue">BLUE</div>
</div>

css
.colors .item {
	background-color: white;
    color: white;
    margin: 10px;
    padding: 20px;
}
.red {
	colors: red;
}

이렇게 진행하면 red 클래스의 글자색만 red로 변할까?
정답은 아니다. 글자색이 변하지 않는다. 이때 오타가 난 것이라고 착각하면 안되고 스타일이 겹치면 클래스의 우선 순위가 정해진다고 생각하면 된다.

➡️ 셀렉터 특정성 점수

나중에 적었다고 무조건 덮어쓰이는 것 아님!

💡 클래스 특정성 점수

더욱 구체적인 클래스일수록 더 높은 점수가 측정되어 우선순위로 지정됨

이 때 vs-code에서 이 순위를 쉽게 알아낼 수 있는 방법
❗️ 선택기에 마우스를 올려보면 선택기 특이성을 볼 수 있다.

💡 선택기 특이성 ➡️ 셀렉터 특정성 점수
(금, 은, 동)

금, 은, 동으로 생각해서 메달따는 것과 같은 규칙으로 점수를 얻는다고 생각하면 된다.

      <header class="header">        
        <a class="icon logo" href="">CITRUS</a>
        <a class="icon lemon" href="">LEMON</a>
        <a class="icon orange" href="">ORANGE</a>
        <a class="icon jamong" href="">JAMONG</a>
      </div>

여기서 자몽에는 (0, 1, 0)으로 은메달 한개가 점수라고 볼 수 있다.

그럼 여기서는? (0, 2, 0)으로 은메달 두개가 점수라고 볼 수 있다. 그러므로 icon에 먼저 글자색을 지정하고 jamong에 글자색을 다시 지정해도 글자색은 변화하지 않는다.

.header .icon이 은메달로 더 구체적으로 설정된 셀렉터이기 때문이다.

➡️ 더 구체적으로 설정해주자

❗️참고로 금메달을 딸 수 있는 경우는 id 셀렉터 뿐이다.

💡 id 셀렉터
하나의 고유한 특성
주민등록번호와 같은 개념으로 한 요소 당 하나!

➡️ id 셀렉터가 최우선 순위로 스타일링 된다는 것을 알 수 있다.

💡 inline css

<h1 color="red"></h1>

같이 태그 안에서 스타일을 지정하는 것은 다른 것보다도 우선순위로 지정된다.

여러명이서 길동아~ 홍길동~ 부르고 있을 때 inline은 귀에대고 부르는 것과 같다고 한다 ㅋㅋ

제일 우선순위라는 뜻이다.

💡 !important
최최최우선 순위이긴 하지만 유지 보수를 위해 사용을 자주 안하는 것이 좋다.

예를 들면 노래방에서도 모두가 예약을 해서 순서대로 진행이 되어야 하는데 한명이 계속 우선 예약을 한다면 순위가 의미가 없게되는 것과 같다.

계속 important를 진행한다면 나중에 important가 쌓이면 순서를 찾아내기가 어렵다.

그렇다면 important가 여러개 겹치면 어떤게 우선일까?
이렇게 되면 important 요소 중 앞서 적은 우선순위가 그대로 적용된다.

8/2 (금)

`Margin`

border 바깥의 여백 개념

💡 Margin
해당요소가 실제 차지하는 공간과 보여지는 영역을 별도로 관리 하는 속성
❗️이동 개념 x 공간 개념 o
차지하는 공간은 달라지지만 시각적으로는 그대로임

➡️ margign-top: 0 일 때

➡️ margign-top: 50px 일 때

이미지가 실제 차지 하는 공간이 늘어남
그치만 보여지는 이미지의 크기는 같다.

💡 Positive Margin
공간이 늘어나는 개념
어디서부터 시작하고 어디서 끝나는지 브라우저를 속인다.

만약 margign-top이 negative (음수)로 주어지면 어떻게 될까?
❗️padding은 negative요소가 불가능함!

💡 Negative Margin
공간이 깎이는 개념
어디서부터 시작하고 어디서 끝나는지 브라우저를 속인다.

실제 공간과 보여지는 것을 다르게 함

➡️ margign-top: -200px 일 때
시각적으로 보이긴 하지만 실제로는 공간 없음 (동그라미)
실제 공간은 (네모) 줄어들은 것

❗️실제로는 피카츄가 위로 이동한 적이 없는데, 그렇게 보이는 것이다.

❗️실제 공간 != 보여지는 공간

++ ) header에서 margin-bottom: -50px 주면 실제 공간이 줄어드니 아래의 요소가 위로 올라온다.

header에서 margin-bottom: -50px을 주는 것과 content에서 margin-top: -50px을 주는 것은 시각적으로 같다.

.box.selected {
	margin-left: -50px;
}

HTML에서 A보다 B가 나중에 나온 마크업이므로 겹치면 B가 A를 덮는다.

.box.selected {
	margin-left: -50px;
    margin-right: -50px;
}

HTML에서 B보다 C가 나중에 나온 마크업이므로 겹치면 C가 B를 덮는다.

`auto + margin`

.container {
	padding: 50px;
}
.map {
	width: auto;
    margin-left:-50px;
    margin-right: -50px;
}

전체 부모의 padding을 없애지 않아도 이 요소 하나만 늘릴 수 있음!

원래는 부모 요소의 width: auto + padding: 50px 때문에 map이 좌우로 여백이 뜨는데 (배경색 포함한 여백)

width: auto + margin: 0 -50px을 사용하면 padding: 50px 를 없애고 위의 사진처럼 전체를 차지할 수 있다.

`margin` 병합 현상

여러 요소들의 마진을 최대한 최적화하여 통합하여 최대한 많은 컨텐츠들을 보여주는 것

일반적인 형제간 마진 병합은 해결해야 하는 문제가 아니라 자연스러운 현상으로 보는 경우가 많지만 부모 자식간 마진 병합 현상은 어색하게 보여 해결해야하는 문제로 인지되는 경우가 있다.

특정 조건을 만족하면 margin 병합이 일어난다.

💡 조건

블록 레벨 요소 간에만 일어남 (부모자식간, 형제간 모두 포함)

상하단 마진만 병합 (좌우마진은 병합 x)

❗️부모에게 경계면에게 border나 padding이 부모의 경계면에 존재한다면 부모와 자식 마진 병합 x

자식과 자식의 마진 = 부모와 자식간의 마진

부모 - 블록레벨요소 & 자식 - 블록레벨요소
둘 다 블록 레벨일 때 인접해있는 상하단 마진이므로 병합된다.

➡️ 같은 선상에서 시작되므로 큰 마진으로 (하나로) 통일된다.
➡️ 같은 시작점에서 하나의 마진 공유하고 있음

👀 margin 병합 현상 해결 방법 1
border를 지정하면 부모의 마진과 자식의 마진을 분리할 수 있다.

❗️형제의 마진 병합은 해결할 수 없음
❗️부모와 자식간의 마진 병합에만 사용 가능

👀 margin 병합 현상 해결 방법 2 ⭐️⭐️
부모 요소에 overflow: scroll or overflow: hidden 를 주면 부모의 마진과 자신의 마진을 분리할 수 있다.

overflow: visible이 아니면 새로운 독립적인 문서의 시작점으로 재구성된다.
➡️ 새로운 블록 포맷팅 컨텍스트가 형성된다.
➡️ 페이지 안에 새 페이지가 생겨서 그 경계 때문에 마진 병합이 안일어나게 되는 것이다.
➡️ 내부의 마진이 바깥으로 나가지 않도록!
➡️ 바깥과 안쪽의 요소 격리

넘쳐 흐르는 부분 잘라내는 것 -> 부작용 가능성 있음
-> display: flow-root

👀 margin 병합 현상 해결 방법 3 ⭐️⭐️
부모 요소에 display: flow-root

❗️형제의 마진 병합은 해결할 수 없음
❗️부모와 자식간의 마진 병합에만 사용 가능

💡 결론

margin 병합 현상 해결 방법
1. 부모 요소의 padding으로 임의로 조정
2. 부모 요소의 overflow: hidden
3. 부모 요소의 display: flow-root

블록 포맷팅 컨텍스트

블록 포맷팅 컨텍스트가 부여된 요소는 "새로운 문서로 새로 시작"하는 느낌을 주며, 내부와 외부의 영향을 격리시켜 요소들이 독립적으로 배치되도록 한다.

이를 통해 블록 포맷팅 컨텍스트는 플로트 요소의 처리, 마진 병합 해결 등 다양한 레이아웃 문제를 효과적으로 해결한다.

💡 블록 포맷팅 컨텍스트의 생성 조건
블록 포맷팅 컨텍스트는 다음과 같은 조건을 만족할 때 생성된다.

문서의 루트 요소 (html)
플로트 요소 (float 속성이 none이 아닌 요소)
절대 위치 요소 (position 속성이 absolute 또는 fixed인 요소)
인라인 블록 요소 (display: inline-block)
테이블 셀 (display: table-cell)
테이블 캡션 (display: table-caption)
오버플로우 값이 visible이 아닌 요소 (overflow 속성이 hidden, scroll, auto)
display: flow-root 요소
플렉스 아이템 (플렉스 컨테이너의 직계 자식)
그리드 아이템 (그리드 컨테이너의 직계 자식)

해당 개념은, 부모와 자식 관계에서의 마진 병합 문제를 해결하는데 유용하게 활용 된다고 한다!

가상 요소 셀렉터

pseudo element selector
실제 HTML 요소가 아니라 CSS를 통해 선택되거나 생성되는 '진짜인척 하는 가짜 요소'임을 뜻한다.
실제 HTML 문서 트리에 존재하지 않는다.

실제 존재하고 있는 특정 HTML 요소 자체를 선택하는 가상 클래스 셀렉터와는 목적성이 다르다.

1. 선택의 용도로 활용

마크업을 변경하지 않고도 문서의 특정 부분만을 선택하여 스타일을 적용할 수 있다.

적용 가능한 CSS 속성에 제한이 있는 경우가 많다. 일반적인 방법으로 선택하기 어려운 부분도 이 가상 요소로 선택할 수 있는 방법을 제공해주어 스타일을 수정 할 수 있게 도움을 주는 경우가 존재한다.

::first-line : 텍스트의 첫 번째 줄을 선택합니다.
::first-letter : 텍스트 블록의 첫 번째 글자를 선택합니다.
::selection : 사용자가 커서로 선택한 문서의 부분을 나타냅니다.

2. 생성의 용도로 활용

마크업을 변경하지 않고도 문서의 특정 부분에 새로운 요소를 생성 할 수 있다.

::before

/* ::before
   내부 콘텐츠 이전에 새로운 가상 요소를 추가할 수 있습니다. 
   (.wow 요소의 첫 자식으로 생성)
*/
.wow::before {
  content: 'BEFORE | ';
}

::after

/* ::after
   내부 콘텐츠 이후에 새로운 가상 요소를 추가할 수 있습니다. 
	(.wow 요소의 마지막 자식으로 생성)
*/
.wow::after {
  content: ' | AFTER';
}

➡️

<div class="wow">
  <!-- 내부 콘텐츠 이전(before) 위치인 이 라인에 'BEFORE | '라는 콘텐츠가 생성 -->
  CONTENTS
  <!-- 내부 콘텐츠 이후(before) 위치인 이 라인에 ' | AFTER'라는 콘텐츠가 생성 -->
</div>

💡 주의 사항

실제 HTML 구조에 존재하지 않는 요소임으로 자바스크립트를 통한 직접 접근이 불가능
img, input등 내부에 하위 요소를 넣을 수 없는 빈 요소에는 적용 불가
생성된 가상 요소는 최초 display: inline 상태
가상 요소로 생성된 콘텐츠는 대부분의 검색 엔진에 의해 직접적으로 인덱싱되지 않음
즉, 검색엔진이 인식해야 하는 중요한 텍스트 콘텐츠는 HTML에 직접 포함시키는 것이 좋다.

primav

이전 포스트

멋사 1주차

다음 포스트

멋사 2주차

멋사

7/29 (월)

CLI

Git

7/30 (화)

Git 파일 init

7/31 (수)

실습 과제 풀이

스타일 초기화

`:root`

`background` vs `img`

`wrapper`

유지 보수

8/1 (목)

`Class`

➡️ 셀렉터 특정성 점수

💡 클래스 특정성 점수

8/2 (금)

`Margin`

`auto + margin`

`margin` 병합 현상

블록 포맷팅 컨텍스트

가상 요소 셀렉터

1. 선택의 용도로 활용

2. 생성의 용도로 활용

멋사 1주차

실습 - FOX

0개의 댓글

멋사 2주차

멋사

7/29 (월)

CLI

Git

7/30 (화)

Git 파일 init

7/31 (수)

실습 과제 풀이

스타일 초기화

:root

background vs img

wrapper

유지 보수

8/1 (목)

Class

➡️ 셀렉터 특정성 점수

💡 클래스 특정성 점수

8/2 (금)

Margin

auto + margin

margin 병합 현상

블록 포맷팅 컨텍스트

가상 요소 셀렉터

1. 선택의 용도로 활용

2. 생성의 용도로 활용

멋사 1주차

실습 - FOX

0개의 댓글

`:root`

`background` vs `img`

`wrapper`

`Class`

`Margin`

`auto + margin`

`margin` 병합 현상