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);;
}
