[2-1] 반응형 웹 사이트 구축하기

728x90

웹을 공부하면서 사전이 될 웹사이트들
: MDN web docs
w3big.com
css-tricks.com (꼼수 부려서 효과적으로 보이게 하기)
stackoverflow.com
( 개발하다가 모르는 거 생겼을 때 검색 또는 질문 가능)

<img src "~어쩌구" alt="사과를 든 여성 사진"/>
alt = 이미지가 어떤 것을 표현하는지 적어주면 됨.
alt 태그를 작성해주는 것이 웹 접근성에 좋음

id 작명 방법
class 와 달리
대문자를 사용해서 대부분 띄어쓰기를 표현
ex)
#countPlus
#count_plus
.count-plus
.count_plus

HTML 태그의 종류

<a> = 인라인 태그

target 속성 - _blank / _self 넣어줄 수 있음.
외부 사이트로 이동 시킬 땐, 새 탭에서 여는게 좋기 떄문에
blank를 가장 많이 사용
self = 페이지 안에서 메뉴 이동할 때 좀 더 용이
한 탭 안에서 페이지를 바로 이동시켜주기 때문
#id 를 넣게되면 스크롤해서
해당 콘텐츠 위치로 이동시켜줌.

title 속성 - Screen reader 가 읽어줌
어떤 웹사이트인 지 표시해주기

<div> = 섹션을 나눠 스타일을 주기 위한 태그

인라인 요소 안에 블록 요소 중첩 불가
- 인라인 요소가 더 작기 때문에
작은 것이 큰 것을 감쌀 수 없음.

인라인 요소 안에 인라인 요소는 중첩 가능

< 인라인 요소의 기본 >
width: auto
height: auto
변경 불가

auto = 자기 요소의 콘텐츠 크기

상하 간격 속성 변경 불가

< 블록 요소의 기본 >
상하 간격 속성 변경 가능

background - 하늘색 프레임
연두색 그라데이션이 가로정렬

연두색 그라데이션 - 인라인 요소
= background 라는 그룹 안에 묶여져 있어야 함.
※ 한 div 태그 안에 인라인 요소들이 여러 개 존재

가로 행의 로고가 한 줄을 모두 차지.
이미지 요소가 블록 요소처럼 들어감.

하트 그림이 한 행을 차지.

PUSHPULLDOOR 라는 텍스트
= 한 행을 차지

그리고 door-line 라는 Stroke가 회전

모바일 화면 에는
연두색 그라데이션이 3개 존재.

반응형이 됐을 때
나머지 개수를 줄여주면 된다.

SCSS

.main {
  h1 {
    color: red;
  }
}

CSS

.main h1 {
  color: red;
}/*# sourceMappingURL=style.css.map */

둘이 동일하게 사용가능

scss에 저렇게 써넣으면 css에 변환해줌

그리고 점수를 더 높여준다.

main h1 이렇게 두 개가 들어가기 때문

(근데 낯섦..굳이 해야하나 싶다)

Sass 를 사용하는 이유
- 변수를 사용하기 위해서

백그라운드 색상 변수로 지정하기.

$sub_primary: #31e6ff;

하늘 색의 색상을 지정 - 이름 지어주고 색상 넣어줌.

$sub_primary: #31e6ff;

* {
  box-sizing: border-box;
  position: relative;
}

body {
  // 기본 세팅
  margin: 0;
  padding: 0;
  background: $sub_primary;
}
.main {
  h1 {
    color: red;
  }
}

이렇게 사용했다.

= 변수를 사용할 시, 변수가 여러번 색상이 사용됐을 때, 한 번에 바꾸기 편함.

폰트 불러와주기

https://fonts.google.com/

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

- 구글 폰트 사용하기

2개 사용할 거라서

이렇게 2개의 폰트를 담기 누른다음에

맨 처음 부분을 카피한다.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Sans+KR&display=swap" rel="stylesheet">

그리고는 html 상단에 붙여넣어줌.

<!DOCTYPE html>
<html lang="kr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Sans+KR&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <section class="background">
      <span></span><span></span><span></span><span></span><span></span
      ><span></span><span></span><span></span><span></span>
    </section>
    <section class="main">
      <div class="logo-holder">
        <img src="img/logo-holder.svg" alt="RECAP FESTIBAL 로고" />
      </div>
      <div class="heart-holder"><img src="img/heart.svg" alt="" /></div>
      <h1>PUSHPULLDOOR</h1>
      <div class="door-line"></div>
    </section>
    <!-- 섹션 끝 -->
  </body>
</html>

사용할 때는

2,3 번 째 칸에 써져 있는

font-family 복사해서 사용

sass

$sub_primary: #31e6ff;

* {
  box-sizing: border-box;
  position: relative;
}

body {
  // 기본 세팅
  margin: 0;
  padding: 0;
  background: $sub_primary;
  font-family: "Noto Sans KR", sans-serif;
}
h1 {
  font-family: "Bebas Neue", sans-serif;
}

728x90

저작자표시 비영리 변경금지

'> 콜로소 > [고윤서] 인터랙티브 웹사이트 만들기' 카테고리의 다른 글

[2-2] 반응형 웹 사이트 구축하기 (4) - 모바일 사이즈 (0)	2024.04.24
[2-2] 반응형 웹 사이트 구축하기 - 테이블, anchor태그 (0)	2024.04.24
[2-2] 반응형 웹 사이트 구축하기 - 애니메이션 (0)	2024.04.24
[2-2] 반응형 웹 사이트 구축하기 (1) (1)	2024.04.18
[1-2] 디자인 툴 및 플러그인 설치 & 개발 (0)	2024.04.14