김숭늉 마음대로

Udemy section 7 (15일) - 구조만들기, 로고추가, 페이지탐색추가, css 플렉스박스 소개, 플렉스아이템 정렬 본문

IT/웹개발 (100일 도전)

Udemy section 7 (15일) - 구조만들기, 로고추가, 페이지탐색추가, css 플렉스박스 소개, 플렉스아이템 정렬

김숭늉이 2023. 2. 20. 21:56
728x90

 

1. 이번 16일차에는 아래의 세가지 사항에 대해서 배워볼거야!

   - 백그라운드 이미지

  - Flexbox와 Grid를 이용하기

  - Units(단위)에 대해 알아보기  (픽셀 이외에 :))

 

2. 랜딩페이지 만들기 :)

 

1)  맨 처음엔

 

- !로 기본 스켈레톤을 끌고오고

- css 파일 연결해주고

- 구글폰트 link 걸기!

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
    />
    <title>Travel Goals</title>
  </head>
  <body>

   
  </body>
</html>
 
 
2.  구조짜기
 
[MDN에서 구조를 퍼왓어 :)]

이러한 시맨틱 마크업을 구현하기 위해 HTML은 이러한 섹션을 나타내는 데 사용할 수 있는 전용 태그를 제공합니다. 예시:

우리가 만들 랜딩페이지의 구조를 파악하기!

 

웹사이트의 핵심구조를 잡아보았다! 즉 스켈레톤이 끝났다는 말이야!

TIP!!) 텍스트로 header만 쳐도 <header></header>가 자동을 꽂힌다!

 

 

3. 페이지 로고 추가하기

 

<a> -> inline element

<nav> -> block element

 

** 실제 프로젝트에서 유용하게 쓰임! 

 

<span> - 논시맨틱 인라인 element

<div> - 논시맨틱 블록 element

    

 

4. 아래와같이 로고영역을 div 안으로 넣어서 블록 요소로 만들어줬고, 로고영역은 또 유일하잖아? 그래서 id로 지정할거야!

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

      <nav></nav>
    </header>

5. shared.css 문서를 추가했어! (shared 가 위에 올라감 = style.css가 최종적용됨)

  - 어떤페이지든 적용할 스타일인경우에 필요함!

    <link rel="stylesheet" href="shared.css">
    <link rel="stylesheet" href="style.css" />
** 가장 하단에 있는 스타일시트가 최종덮어쓰게 됨
 
 
6. shared.css에 글씨체 적용하기
 
body {
    font-family: "quicksand", sans-serif;
    margin: 0;
}
#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);
}
 

 

  • uppercase  //  모두 대문자로 변경함
  • lowercase  //  모두 소문자로 변경함
  •  capitalize  //  맨 처음 시작하는 단어만 대문자로 변경함

 

 

6. 블록 + 블록인데 나란히 배치하고 싶어!

   -> 플렉스박스가 답이야! 기술의 발전 감사!  

       ㄴ 웹의 개발자도구의 flex 버튼클릭하면 flex의 요소간의 구도가 보임!

 

 핵심 ! 플렉스 컨테이너라는걸 붙여줘야함! (부모 컨테이너에 display : flex를 붙여줌!!!)

-> 근데 flex가 항상 옳은건 아니니까 아래와같이 더 자세하게 해줄수 있음 

 

flex-direction: row ; -> (행)

flex-direction: row-reverse;

flex-direction: column;  - > (열)

flex-direction: column-reverse;

 

주축 -> 좌우 등등

교차축 -> 위아래 등등 

   -> 방향이 어디인지?

 

  -> align-items : center로 글자 위치 중앙으로 오게 ! :)

 

7. flex-wrap : wrap 

   ㄴ 마우스로 웹의 너비를 줄이는것에 따라 플렉스 박스의 위치가 변경됨 / 반대는 nowarp(변경없음) -> 이제기본값 

 

 

8. 플렉스 (각 플렉스 아이템간의 위치를 정함) 핵심규칙!

 

justify-content : space-between ;  각각 양쪽 끝으로

 

 

9. body나 ul에 자동으로 적용되는 마진은 0으로 바꿔놓고 시작하는게 좋을것같아!

 

 

728x90
반응형

'IT > 웹개발 (100일 도전)' 카테고리의 다른 글

Udemy section 7 (17일) - %단위, 헤더(box-sizing), 하이라이트 섹션  (0) 2023.02.23
Udemy section 7 (16일) - 프로젝트 박스추가, 컨테이너생성, 포지셔닝 요소, 고정/절대위치 이해하기  (0) 2023.02.21
Udemy section 6 (14일차) - GitHub 개인 엑세스 토큰, 깃 클론, 프로젝트 공동작업, 프로젝트 기여  (0) 2023.02.19
Section 6 - Git 요약  (0) 2023.02.18
Udemy section 6 (13일) - Code lense 활성화, 브랜치 병합, 삭제  (0) 2023.02.18
'IT/웹개발 (100일 도전)' Related Articles more