프로젝트 요약

1강 - 프로젝트 설정

# css 아웃소싱 및 구글 폰트 연동

# css파일 아웃소싱: h1같이 계속 존재해야하는 요소, 기본 틀은 shared.css에 저장해서 link요소로 불러오기

 

 

2강 - 로고 추가

# a : void 요소이고 인라인 요소(<=>블럭)임 따라서 다음 줄에 블럭 요소가 오면 수직배치됨. css로 바꾸는거 보다는 이럴 때는 div tag를 이용!

[예시]

      <div id="page-logo"><a href="/index.html">Travel Goals</a></div>

 

 

3강 - 요소의 위치 설정

# css 플랙스박스 : 요소의 위치 설정을 용이하게 하는 속성

# 플랙스 컨테이너 : 플랙스 박스들을 관리하는 부모요소 

[예시]

#container {
    display: flex;
}

요소들의 부모요소를 잘 파악해서 부모요소에 적용해야한다.

 

개발자 도구를 들어가면 볼 수 있다.

flex-direction의 기본값은 row  ( 행으로 배치 )

 

용어정리

# 주축 ( main-axis ) : 배치가 row 인 경우 왼쪽 끝 ~ 오른쪽 끝, 리버스이면 오른쪽 끝 ~ 왼쪽 끝, colunm이면 위~아래

# 교차축 ( cross-axis ) : 배치가 row이면 위 ~ 아래, colunm이면 왼쪽 ~ 오른쪽

 

 

4강 - 플랙스 아이템 정렬

# 현재 우리는 div와 nar을 떨어뜨려 놓고 싶다. 3강 예시 참고

 

# 이때 플랙스 박스 기능 중 하나인 justify-content속성을 사용할 수 있다.

# space-between은 컨테이너에 포함된 요소가 차지하지 않는 공간 ( 3장 그림 점선부분 )을 계산하여 두 공간 사이에 계산한 공간을 더해주는 값이다.

 

#container {
    display: flex;
    justify-content: space-between;
}

 

[결과]

# space-around 결과

 

# space-evenly 결과

around와 다른점은 일정하게 나누어 진다는 것이다.

 

# center 결과

 

5강 - 프로젝트에 플랙스박스 추가

4강 보고 justify-content 값을 설정한 뒤 header에 align-itmes의 값을 center로 설정하면 부모요소에 포함된 요소 (itme) 들을 가운데로 정렬할 수 있다.

 

 

 

6강 - 배경화면 만들기 ( 이미지 첨부 )

배경화면 이미지는 블럭 to 블럭 처럼 아래에 위치하지 않고 인라인 처럼 옆에 위치하지도 않는다. 

그저 맨 뒤에 깔려있는 이미지인데 지금까지 다룬적이 없다. 어떻게 해결할까?

step 1. 이미지를 저장할 폴더에 이미지를 가져온다.

step 2. background-image 코드 입력

[html 코드]

<section id="hero">
        <h1>Joe's Travel Page</h1>
        <p>Let's explore the world together!</p>
        <a href="/places.html">Discover places</a>
      </section>

 

[css코드]

#hero {
    height: 800px;  
    background-image: url(images/places/ocean.jpg);
    }

 

[결과]

하지만 뭔가 만족스럽지 않다. 원본사진에서 왼쪽 위부분만 확대되어 있는듯하다.

 

 

step 3. background-position속성으로 초점 맞추기

 

[css 코드]

#hero {
    height: 800px;  
    background-image: url(images/places/ocean.jpg);
    background-position: center;   
}

 

[결과]

 

 

step 4. bacground size로 사진 사이즈 고르기

 

[css코드]

#hero {
    height: 800px;  
    background-image: url(images/places/ocean.jpg);
    background-position: center;
    background-size: cover;
}

 

[결과]

가운데를 초점으로 하고 화면에 사진이 모두 채워졌다.

 

 

 

7강 - 포지셔닝

# 컨테이너를 가운데에 놓고 싶을때, text-align을 center로 설정할 수 있지만 margin의 사이드 값을 auto로 설정하는 방법도 있다.

 

 

 

8강 - Document flow & positioning

# HTMl 요소는 문서 흐름을 따른다. 문서 흐름이란 블록 요소들 간에는 수직 배치되어 서로 겹치치 않는 이런 룰 같은 것을 뜻한다. 하지만 프로젝트에서 겹침 상관없이 하나의 요소의 위치를 변경하고 싶다. 이때 방법이 무엇일까?

 

step 1. 기본적으로 설정된 문서 흐름을 깰 수 있는 권한을 css코드로 줄 수있다. ( position 속성을 relative로 변경 )

step 2. 요소를 css코드를 통해 포지셔닝 할 수 있다. 

#hero-content{
    width: 900px;
    background-color: rgba(51, 47, 47, 0.8);
    box-shadow: 2px 4px 8px rgb(68, 67, 67);
    border-radius: 8px;
    text-align: center;
    padding: 50px 0;
    margin: 0 auto;
    position: relative;
    top: 200px;
}

step 2. 에서 포지셔닝 할 경우 top을 200px로 설정하면 아래로 200px만큼 이동하는데 이를 편하게 이해하기 위해

"해당 요소를 top방향으로 200px힘만큼 밀어낸다." 라고 생각하면 편한 것 같다.

top 대신 bottom을 사용할 수 있다. 

 

 

 

9강 - 절대위치와 상대위치

header 요소를 배경 위에 올리고 싶다. 앞서 position속성을 reletive로 주고 top속성으로 위치를 상대적으로 움직일 수 있었다. 그런데 이 방법은 그렇게 좋은 방법은 아니다. 그럼 일반적으로 어떻게 할까? ( 워드로 치면 배경 맨뒤로 보내기 같은건데... )

 

답은 position속성의 값을 absolute로 설정하는 것이다. 이렇게 설정하게 되면 해당 요소는 절대위치를 갖게된다. 이게 시스템적으로 어떻게 이루어질까? 바로 다른 요소의 관점에서 해당 abs한 요소는 무시되는 것이다. 이게 절대 위치의 개념이고 기본적으로 html에 절대위치로 바뀌게 된다. 하지만 현재 프로젝트에서는 html가 아닌 header에 대해서 절대위치를 가지고 싶다. 이렇게 하기 위해서는 header요소의 position 값을 reletive로 설정해야한다. 이렇게 설정하면 abs요소가 header에 대해서 절대적인 위치값을 갖게 된다.

 

 

10강 - %단위 작업

# header요소를 맨 위에 row에 채워넣기 위해서 width 값을 조정하는 경우 단위를 px로 쓰게 되면 html의 가로 px을 직접 입력해야하고 시스템에 따라 다를 수 있으므로 매우 비효율적이다. 이런경우 %단위를 많이 사용하게 된다.

 

#two {
  background-color: #c95bc7;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

 

 

하지만 이런상황을 원하는 것을 아닐 것이다. 이러한 상황은 boxsizing의 디폴트가 content-box라서 일어나는 일인데 켄텐츠가 부모의 요소에 맞춰진다는 것이다. 즉, 패딩, 테두리, 마진을 뺀 컨텐츠 자체가 부모요소에 맞춰지고 추가적으로 위치나 마진, 패딩 등이 기본값으로 세팅돼서 오른쪽 옆이 비어있는 형태를 보이게 된다.

 

box-sizing: border-box;

디폴트가 아닌 border-box로 속성값을 지정해주면 

컨텐츠 + 패딩의 너비가 html의 너비와 같아진다. 이게 원하는 상황일 것이다. 

또한, border을 추가해줘도 켄텐츠 + 패딩 + 테두리가 html width가 되도록 자동으로 조정된다

 

# position 값을 fixed로 설정하면 뷰포트에 요소가 고정된다.

# 뷰포트란 모니터로 보고있는 웹페이지 부분( 드레그 해서 나오는 부분x)을 말한다

 

 

 

11강 - 플랙스 컨테이너 구축, 항목 레이아웃, object-fit

# 여러 이미지를 넣고 싶을 때 ( 하나의 row에 ) ul을 사용하여 3개의 li에 img를 넣은 뒤 ul을 플랙스 컨테이너로 지정한다.

# 이미지의 크기, 위치를 조정할 때 width 값을 %로 주게 되면 웹페이지에 따라 동적으로 변경된다. 또한, %는 부모요소에 영향을 받는다.

# object-fit은 이미지를 원본이 아닌 width나 height를 조절했을 경우 왜곡, 비율깨짐 현상을 방지할 때 유용하게 사용할 수 있다. 값으로는 cover를 사용하며 contain을 사용하면 비율유지를 하지만 흰색으로 구분되어 보기에 좋지 않다.

기본값은 fill로 비율 상관없이 이미지로 다 채워넣는다.

 

 

 

12강 - 부모 & 자식 마진 축소

두 사진을 보면 첫 섹션 아래에 공간이 존재한다. 하지만 두 섹션 모두 마진이 존재하지 않는다. 

저 창조공간은 무엇일까? 

범인은 바로 h2였다! 왜 이런 현상이 일어날까? 바로 부모-자식 관계에서 일어나는 마진 겹침 현상이다!

section요소에는 마진이 없고 h2 요소에는 마진이 있어서 h2요소의 마진이 적용되는 것이다. 이는 section 요소에 패딩을 추가하므로써 해결할 수 있다.

 

 

 

13강 - 배경에 생동감 주기

배경색을 그냥 컬러로 주기보다는 자연스럽게 색이 바뀌는 것이 이쁘다. 이런 고급 기능을 css 코드로 구현할 수 있다.

#highlights {
    padding: 24px;
    background: linear-gradient(deg, rgb(227, 255, 253), rgb(202, 243, 240));
}

 

바로 background의 linear-gradient값을 주는 것이다. 3개의 파라미터가 필요한데 각각  ( 각도, 첫번째색, 두번쨰 색)이다.

결과

 

두번째 색션이 45도 각도를 기준으로 첫번째색, 두번째색 으로 나누어지는것을 볼 수 있다.

 

 

14강 - footer styleing

# margin을 auto로 주어 가운데로 지정하는 경우는 어떤 요소가 html 기본 margin으로 right 마진만 가지고 있는 경우 상속의 특성을 통해 auto 값을 통해 양옆을 같은 크기로 맞춰줄 수 있다.

따라서, 텍스트가 아닌 이미지를 가운데로 정렬하기 위해서는 justify-content 속성을 center로 지정해야한다.

 

# width속성에서 %단위는 부모요소의 크기에 대한 비율로 나타나는 것임을 인지해야한다.

 

 

15강 - overflow

# div는 의미가 없는 컨테이너 역할에 사용하는 non - semantic element 이다.

 

# li 요소에 border-radius속성을 통해 모서리를 둥글게 만들었는데 왼쪽 이미지에는 적용이 안된것 같다.

이 문제는 이미지가 li요소를 초과해서 나타나고 있기 떄문이다. 초과한 부분이 나타나는 이유는

overflow속성의 기본값이 visible 이기 때문이다. 따라서 이미지가 초과된 부분이 나타나는 거고 값을 hidden으로 바꿔주면 초과된 부분이 사라져 의도대로 표시된다.

 

 

 

 

 

16강 - flex 박스를 통한 포지셔닝

단락(p)와 링크(a) 사이의 공간을 flex박스를 이용하여 공간을 주고 싶다 ( 마진 x )

li 요소에서 이미지를 제외한 오른쪽 친구들을 flex박스로 만든 뒤 flex-direction속성을 기본값 row 에서 column으로 변경한 뒤 justify-content속성을 space-between값을 통해 해결해보자.

 

 

당연하게도 h2와 p사이에도 공간이 생긴다. 이를 어떻게 해결할까? space-between속성은 부모요소에 적용했을 경우 자식요소들에 대한 공간이 부여되는거기 때문에 div (논 시멘틱 요소 )를 통해 h2와 p를 묶어서 한덩어리로 만들어주면 된다.

 

 

 

17강 - CSS 그리드 ( 행과 열 2차원 표현 )

 

그리드는 2차원( 행과 열 )을 다룰 때 유용하게 사용할 수 있다. 

그리드 속성으로 열 2개를 추가하고 각각 크기를 1 : 1로 만들기위해 fr ( fraction : 동일한 공간 )사용 

 

또한, gap 속성을 통해 각 요소를 기준으로 행 100px 열 200px만큼의 공간을 만들어준다.

 

 

18강 - nth 선택자

여러 li에서 특정 li를 선택하고 싶을 때 id 또는 class를 이용하였지만 nth 선택자를 통해 쉽게 선택할 수 있다.

li:nth-of-type(3) {
  background-color: yellow;
  grid-column: 1 / span 2;
}

 

또한, grid-column속성을 이용하여 해당 요소가 몇 열을 차지할지 정해줄 수 있는데 예를 들면 1 / 3 은 1열 ~ 3열을 차지하라는 소리이다. 

개발자도구에서 grid를 클릭하면 열이 어떻게 이루어지는지 볼 수 있는데

다음과 같이 1, 2, 3이라는 라는 박스가 존재하고 1열은 1~2, 2열은 2~3인 공간을 구성되어있다. 

그리고 1 / span2의 의미는 "1열부터 시작해서 2개의 열을 차지해줘"라고 브라우저에게 명령한다.

 

 

 

19강 - 유니코드 utf-8 작업

https://en.wikipedia.org/wiki/Arrows_(Unicode_block) 에 접속

Arrows (Unicode block) - Wikipedia

표를 참고한다. x에 열에 있는 숫자를 넣으면 그 문자를 사용할 수 있다. ex) U+2192는 "->"를 사용할 수 있다.

 

코드로는 &#x2192라고 입력한다. 즉, 앞에 "&#x"를 추가한다.