Udemy section 7 (16일) - 프로젝트 박스추가, 컨테이너생성, 포지셔닝 요소, 고정/절대위치 이해하기

 

1. text/item 정렬하기 

text-align : right ; 

 

align-items: center;

 

align-items :  center 적용시, 위로올라가있던 text가 중앙으로 정렬됨

 

 

2. 아래와 같이 헤더영역 완료!

 

body {

    font-family: "quicksand", sans-serif;

    margin: 0;

}

ul {

    list-style: none;               -> 일반적요소가 생기면 위로 올려

    margin: 0px;

    padding: 0;

}

header {

    display: flex ;                                     -  세

    justify-content: space-between;        -  트

    align-items: center;

    padding: 15px 60px;

}

#page-logo a {

    padding: 10px;

    font-family: "Oleo Script", sans-serif;

    color: rgb(245, 243, 160);

    font-size: 50px;

    text-decoration: none;

    text-transform: uppercase;

    text-shadow: 1px 1px 2px rgb(0, 0, 0);

}

header ul {

    display: flex;

}

header li {

    margin-left: 20px;

}

#page-logo a {

    padding: 10px;

    font-family: "Oleo Script", sans-serif;

    color: rgb(245, 243, 160);

    font-size: 50px;

    text-decoration: none;

    text-transform: uppercase;

    text-shadow: 1px 1px 2px rgb(0, 0, 0);

}

 

 

3. 그렇다면 배경이미지를 적용하는방법? 

일단 각각의 메인 섹션에 고유 id값을 지정해

   <main>

      <section id="hero"></section>

      <section id="hightlights"></section>

    </main>

 

#hero {

    height: 800px;

    background-image: url("/images/places/ocean.jpg");

    background-position: center;

    background-size: cover;

}

    -> html이 아니라 css (background-image: url("/images/places/ocean.jpg");를 통해서 추가한다 

    ->    background-position: center; 을 쓰면 사진이 중앙으로오긴하지만 과하게 확장 되어있음

    ->    background-size: cover; 흔히사용됨 기본적으로 전체를 덮어줌 

 

 

4. 히어로 콘텐츠를 위한 컨테이너 생성하기

 

 [ Joe travel page 박스 만들기 ]

 

   핵심!!!) 논 시맨틱 요소로 묶어주기!

  *** 그리고 모든 박스는 width로 먼저 넓이를 설정해주렴~

 

  *** 박스 컬러는 불투명도를 조금 넣고싶어서 rgba를 이용해서 설정!

 

  *** 그리고 박스안에 있는 글씨들을  중앙으로 배열시키자

       text-align: center;

  *** 그리고 margin auto 기능을 통해 박스를 중앙으로 배열시키자

      margin: 0 auto;

 

 

---------------------

#hero-content {

    width: 900px;

    background-color: rgba(51, 43, 47, 0.8);

    box-shadow: 2px 4px 8px rgb(68, 67, 67);

    border-radius: 8px;

    text-align: center;

    padding: 50px 0;

    margin: 0 auto;

}

 

 

5. 포지셔닝 요소

 

그럼 박스를 아래 내리는건 어떻게 할수가 있지?

 

 

 

position : static; (기본속성-요소를 상하좌우로 위치를 이동할수 없음/요소는 그냥 그자리에 있는거야  )

top : 20px (위쪽으로 거리를 바꿀수 있게 해줌 / 현재위치로 부터 이동함)

---> 아무일도 안일어남 static(정적인)이라 바뀔수가 없어!

 

position : relative 

top : 20px (right 등도 사용가능)

---> 움직임! :)

   즉! 문서 흐름의 일부로 둠! 요소를 상하좌우로 이동시킬수가 있음 !

 

 

6. 히어로 콘텐츠 스타일링 

    font-weight: 300;

    font-weight: bold;

       ㄴ 폰트 무게 조정 이렇게 두가지 방식으로 조정할수 있어!

 

    #hero-content a:hover {

    background-color: rgb(255, 238, 0);;

}

 

      팁!!) 가운데 숫자를 바꿔주면 더 어두워진다? 

 

 

7. 고정, 절대위치 이해하기! :)

 

-> 배경이미지 속성을 헤더뒤에 묻히게끔 하려면?!

앱솔루트 기능을 사용하면 그 element는 더이상 다른 요소들이 간주하기에 존재하는 element가 아니다 (투명인간같이)

    ㄴ 즉 문서흐름에서 빠지게 되는거야!

 

 

**  위치를 마음대로 바꿀수 있음  (top, right, bottom, left 와 함께 다 써~~~)

    position : absolute (html 요소에 따라서 상대적/ 마우스 아래로 내리면 안보임)

      ㄴ 앞서 이야기했지만 문서흐름에서 빠짐! (인라인 요소 같겠지만 요소간 사이에서 아예 무시됨)

      ㄴ position : relative 규칙이 적용된 선조가 있는지 없는지? 

    position : fixed (뷰포트(현재보고있는화면)에 상대적)

      ㄴ 스크롤을 내려도 원래 있던곳에 머무름! (딱붙어있는 내비게이션바를 원할때!)

 

 

 

선조에 position : relative가 있으면 position : absolute로 적용된 #two는 첫번째 선조인 #container에 상대적이게 됨

 

 

 

--------------------------------------------------------

오늘까지 적용된 style.css 내용

 

#hero {

    height: 800px;

    background-image: url("/images/places/ocean.jpg");

    background-position: center;

    background-size: cover;

}

#hero-content {

    width: 900px;

    background-color: rgba(51, 43, 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;

}

#hero-content h1 {

    color: white;

    text-transform: uppercase;

    font-size: 50px;

    font-family: "Raleway", sans-serif;

    margin : 0;

}

#hero-content p {

    color: white;

    text-transform: uppercase;

    font-size: 24px;

    font-weight: 300;

    margin-bottom: 32px;

}

#hero-content a {

    text-decoration: none;

    background-color: rgb(255, 251, 0);

    padding: 12px 24px;

    color: black;

    font-size: 24px;

    font-weight: bold;

    border-radius: 8px;

    box-shadow: 2px 4px 8px rgb(68, 67, 67);

}

#hero-content a:hover {

    background-color: rgb(255, 238, 0);;

}