멋사 1주차

7/24 (수)

첫 날이라 임시 팀원들과 간단하게 OT 진행하고 서로의 목표에 대해 이야기하는 시간을 가졌다. 서로의 목표를 이야기하고 구체화하는 과정에서 내가 어떤 목표를 가졌는 지에 대해 자세하게 생각해볼 수 있어서 좋았다!

7/25 (목)

상속

✔️ 요소에 따라 상속이 되는 요소가 있고 아닌 요소가 있음
상속 o --> text-align
상속 x --> width, border ...
상속이 안되는 요소를 inherit을 사용하여 억지로 상속할 수 있음!

ex)

div { border: 1px solid black }
h1 { border: inherit }

부모에게 있는 요소의 속성을 (상속이 아닌 요소) 억지로 상속

css 파일 관리

💡 여러개의 html파일에 같은 스타일이 적용되면?
중복되는 코드를 각 html파일에 넣으면 관리가 불편하므로 css 파일로 별도로 관리

css 파일에 중복되는 스타일 작성
조금 다른 부분은 html 파일의 style

Box model (css)

• width: 적어주지 않으면 자신의 부모요소 너비만큼 가득 참
• height: 적어주지 않으면 자신의 자식요소 높이만큼 가득 참
  (hegiht는 유지보수를 위해 적지 않는 것이 좋음!!)
• margin

margin: 상우하좌
margin: 상하  우좌  
margin: 0 auto --> 상하 마진:0 좌우 마진 auto -> 가운데 정렬
margin: 0 auto 0; 

• padding
• border

box-sizing

💡 box-sizing (내가 자주 헷갈리는 것!!)

• content-box: 요소의 너비와 높이가 콘텐츠만을 포함
  (padding, border은 포함x)
• border-box: 요소의 너비와 높이가 콘텐츠, padding, border 모두 포함

display

💡 display ⭐️⭐️⭐️
시각적으로 요소가 화면에 표시되는 방식

• block: 부모로부터 받은 공간을 모두 활용하는 것 --> 가로로 한 줄을 다 쓰는 것! (한 줄에 하나씩 배치)
  ➡️ 가용 공간이 존재하니 margin: auto 가능!
  - 대부분의 요소는 다 block

• inline: 콘텐츠 요소 크기만큼만 공간 차지

  • text
  • image
  • container
    

위는 내가 정한 style.css
아래는 user agent stylesheet --> 기본 제공해주는 css

아래의 h1 display: block을 보면 이 요소가 block인지 inline인지 알 수 있음

👀 헷갈렸던 것

text-align: center --> 컨텐츠만 중간으로 감!! (글자 등) 

➡️ 텍스트를 가운데 정렬하는 property가 아니라
➡️ Inline 요소를 가운데 정렬하는 property✨!!

사용자 에이전트 시트

속성들의 초기 값이 각 브라우저마다 알아서 css가 적혀있음

❗️ 이렇게 되면 내가 작성하는 css와 사용자 에이전트 시트에서 기본적으로 속성에 적용되는 css가 구분이 안되고 섞여서 내가 원하는 화면을 구상 못할 수도 있음

➡️ User Agent Sheet 초기화 (맨 위에 margin:0)

7/26 (금)

❗️ 맨 처음엔 레이아웃 잡기!
레이아웃을 잡을 땐 가장 큰 것부터 작업 순위 매겨서 잡으면 된다.

Margin : auto (가운데 정렬)

❗️ 꼭 외우기 ! (가운데 정렬하는 법 ⭐️⭐️⭐️)
margin: auto 가용공간 block

div {
  background-color: white;
  width: 800px;
  margin: auto;
}

👀 헷갈렸던 점
css를 적용할 때 배경을 지정해도 바뀌지가 않음

나는 나의 코드가 잘못되었거나 div를 제대로 적용하지 못한 줄 알았는데 그냥 div안에 content가 없어서 배경이 안보이는 거였음!!

❗️ 요소가 얼마나 자리를 차지하는 지 등을 시각적으로 확인하려면 뒤에 배경을 그냥 임의로 둬서 확인해보면 됨
❗️이 때 배경을 확인하려면 꼭 컨텐츠가 있어야 함

div는 block이므로 한줄을 전체로 다 잡는다고 생각하면 된다. (너비)
이때 width를 임의적으로 800으로 지정했으므로 가용공간이 생긴다. (더 사용할 수 있는 공간)
➡️ 이 때 !! margin: auto를 사용하면 가운데 정렬이 가능한 것이다.

웹사이트 구성 요소

보통의 웹사이트는 Header, Content, Footer 이렇게 구성된다.

• Content는 변화 가능한 부분!
• Header, Footer은 고정!
  ➡️ header, main, footer로 구성 (얘네는 의미를 가지므로 시멘틱 태그이다)

class

div가 중첩되다 보면 css적용이 제대로 안된다.
아래처럼 되면 디자인을 각각 할 수 가 없다는 것이다.

<div>
	<div>
	    contents
	</div>
   	<div>
	    footer
	</div>
</div>

➡️ 이럴 때 사용할 수 있는 것이 class이다.

<div class="wrapper">
	<div class="header">
	</div>
</div>

• 맨 처음에 모든 것을 포함하는 div를 보통은 wrapper로 둔다.
• 같은 class명이면 같은 디자인이 적용된다.

순서

1. 제일 큰 div부터 아무 글자나 배경 넣어서 시각적으로 확인하기
2. 세부 div 잡아서 컨텐츠 넣어 시각적으로 확인하기
3. 컨텐츠 넣기 (각 div에 들어있는 img, text 등을 일단 모두 다 넣어보기)
4. 각 user agent stylesheet 제거

++ 새로운 마크업(img, 을 했을 때는

폰트 사이즈

em은 상속이 가능한 폰트 크기 속성으로 2배라는 것을 뜻한다.

👀 헷갈렸던 점
margin, padding에서 %개념이 나오면 무조건 부모요소의 너비에서 퍼센트 개념!

margin-top: 20%를 해도 부모요소의 너비의 20퍼센트라는 것이다!
이미지는 크기가 정해져있기때문에 너비만 조정해도 크기가 알아서 조정됨

맨 처음 초기화

그 동안은 user agent stylesheet 때문에 알아서 자동으로 정해진 값을 없애고 싶을때 margin: 0, font-size:16px 이런식으로 우리가 직접 지정했다.

하지만 이 방법보다

• initial : 상속o
• inherit : 상속x
  로 초기화를 하면 브라우저가 알아서 초기값을 세팅해준다.

h1 {
  margin: initial; /* 상속 안되는 속성을 초기화 할 때 */
  font-size: inherit;
  font-weight: inherit; /* 상속 되는 속성을 초기화 할 때 */
}

콤비네이터

❗️띄어쓰기에 따라 다르므로 주의

body.type_orange .wrapper --> 바디이면서 타입-오렌지 중에 모든 래퍼
body.type_orange.wrapper --> 바디이면서 타입-오렌지이면서 래퍼인 것

주의 사항

        <div class="section">
          <h2>Information</h2>
          <ul class="list">
            <li>Kwon Saebom</li>
            <li>spring180@naver.com</li>
            <li>Seoul, Korea</li>
          </ul>
        </div>

li에 css를 적용하고 싶을때

• section li
  이렇게 진행하면 section -> ul -> li 이렇게 한번 더 거치므로 유지보수에 좋지 않음

• .list li
  이렇게 진행해야 좋다
  ul에 클래스 달아서 최대한 자세하게 표현!

• .main .list li
  앞에 .main까지 붙여서 main은 main header은 header로 보기 편하게 할 수 도 있다.

배경

배경 이미지의 크기에 따라 반복이 된다.
background-repeat 속성은 기본값이 repeat로 반복되는게 기본값이다.

background-repeat: repeat; // no-repeat
background-position: center; // 가운데로
background-size: 200px 400px; //이미지 크기 조정

background-image: url(images/icon-information.png);
background-repeat: no-repeat;
background-position: right 40px center;

background-position: 오른쪽 정렬, 40px만큼 오른쪽에서 떨어짐, center

⭐️⭐️⭐️ Class에서 다 같은데 몇개의 스타일만 다를 경우 ⭐️⭐️⭐️

클래스의 중요한 특성이므로 이해하고 넘어가자.

<div class="section information">
<div class="section skill">
➡️ 공통 분모 : section 클래스로 묶기
➡️ 다른 요소 : information, skill로 표시

.section {
  background-color: white;
  padding: 20px;
  margin: 20px;
}

.section.information {
  background-image: url(images/icon-information.png);
  background-repeat: no-repeat;
  background-position: right 40px center;
}

.section.skill {
  background-image: url(images/icon-skills.png);
  background-repeat: no-repeat;
  background-position: right 40px center;
}

.section ➡️ section을 class로 갖는 모든 것 스타일링
.section.information ➡️ section과 information 모두 만족하는 것만 스타일링
.section.skill➡️ section과 skill 모두 만족하는 것만 스타일링

❗️ section으로 공통분모를 스타일링 한 다음 각 요소들은 뒤의 나오는 것을 이용하여 개별적으로 스타일링

margin 병합

가운데를 보면 위의 마진-bottom 10px과 아래의 마진-top 10px이 합쳐져서 20px 정도의 거리가 떨어져야하는데 사진과 같이 10px로 마진이 병합된 걸 볼 수 있다.

❗️블록레벨과 블록레벨 사이에서만 일어남
❗️인라인과 블록 사이에서는 안일어남

이미지 (마크업? vs CSS?)

• 마크업 : 중요한 컨텐츠를 나타내는 이미지
• CSS : 그냥 꾸며주는 이미지