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_plusHTML 태그의 종류
<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;
}
}이렇게 사용했다.
= 변수를 사용할 시, 변수가 여러번 색상이 사용됐을 때, 한 번에 바꾸기 편함.
폰트 불러와주기
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 |
