티스토리 뷰
HTML
1. HTML 전체 뼈대 잡는 법
HTML을 처음 작성하려 했을 때 조금은 막막했다. 물론 유튭 강의를 활용해 HTML, CSS 내용을 공부했지만, 뭔가 ABC만 가르쳐주고 자, 이제 영어 문장을 만들어봐! 라고 말하는 느낌! 어떻게 구조&골격을 짜야할지 고민이 많았어서, 다른 개발자들의 홈페이지들의 전체적인 틀이나, 클래스 명을 참조하여 작성을 시작하였다.
참고한 홈페이지들은 다음과 같다. 심플하지만 내가 구상한 기능들을 가지고 있는 홈페이지들을 선택해 보았다. Brittany Chang, 김민지의 자기소개서, Hey, I'm Jihyung!, Mac Böck. 이 중 특히 몇몇 개발자들의 홈페이지 HTML, CSS 코드를 보면 처음보는 나도 이해가 될 수 있을만큼 구조가 잘 짜여져있다는 것을 볼 수 있었다. 누가 봐도 이해할 수 있는, 깔끔하고 정돈된 코드의 중요성을 생각해보게 되었다.
2. 스크롤 기능 구현
너무 당황스러웠던 순간이었다. Live Server로 내가 짠 코드를 브라우저 상에 띄웠는데 스크롤이 안되는 것이었다. 그래서 구글링을 해보았는데 너무 기본적인 내용이었기 때문일까 내 구글링 실력이 부족한 탓일까, 잘 나오지 않았다. 찾으니깐 화려한 스크롤 효과, 스크롤 바 css로 꾸미기, 무한 스크롤 구현하기 이런 것 밖에 안나와서.. 흑흑 쪼금 애먹었지만 한 사이트에서 스크롤 기능 구현해놓은 것을 보고 적용해봤더니 단순 스크롤 기능이 구현되었다! 야호:)
<body style="overflow:scroll">
CSS
1. 전체 페이지 백그라운드 색깔 & 패딩 값 설정
body{
background-color:#0A192F;
padding : 200px 120px 0px;
}
2. 폰트 적용하기
① 웹폰트로 적용하는 방법
- 보통 구글 폰트, 눈누 사이트를 많이 이용한다.
- 해당 사이트에서 웹 폰트 링크를 끌고 와 css 파일에 적용하면 폰트로 추가가 된다.
- 적용하고 싶은 부분이 있을 경우 font-family: '폰트 이름'; 이런 식으로 적용해주면 된다.
@font-face {
font-family: 'GmarketSansMedium';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'GmarketSansLight';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'SEBANG_Gothic_Bold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Bold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.....
h1{
font-family: 'GmarketSansLight';
}
② 폰트 파일 적용하는 방법
- 다운로드된 폰트 파일을 프로젝트 디렉토리에 복사한다. fonts 폴더를 만들어 그 안에 넣어두는 것이 좋다.
- 폰트를 적용하고 싶을 때는 웹 폰트를 적용했던 방식과 동일하게 @font-face 코드를 활용하며, url 주소와 format(확장자명) 을 작성해주면 된다.
※ 브라우저마다 지원해주는 폰트 확장자가 달라 폰트 파일로 폰트 적용을 하고 싶다면 브라우저 지원 여부를 확인해야한다. 폰트 확장자를 변환하고 싶다면 이곳을 클릭해보자!
※ 참고자료:
3. Margin & Padding
.introduce-content{
display:block;
margin-top: 50px;
margin-bottom: 240px;
font-family: 'GmarketSansMedium';
color:#E0D6D6;
}
.subheading-kor{
font-size: clamp(1rem, 2vw, 1.5rem);
font-family: 'GmarketSansMedium';
margin-top: 0px;
margin-bottom: 10px;
}'Introduce' 페이지에서 가장 아래쪽에 위치한 내용은 바로 introduce-content이다.
그리고 그 다음 '목표' 페이지로 넘어가게 되는데, 목표 페이지 가장 상단에 위치한 부분은 바로 subheading-kor이다.
이 둘 사이의 간격을 많이 벌리고 싶어 처음에 아래와 같이 introduce-content의 margin-bottom을 100px로, subheading-kor의 margin-top을 140px으로 설정을 해보았다. 나는 (100px+140px = 240px) 만큼 벌어질 줄 알았는데, 그러지 않았다..
.introduce-content{
display:block;
margin-top: 50px;
margin-bottom: 100px;
font-family: 'GmarketSansMedium';
color:#E0D6D6;
}
.subheading-kor{
font-size: clamp(1rem, 2vw, 1.5rem);
font-family: 'GmarketSansMedium';
margin-top: 140px;
margin-bottom: 10px;
}그래서 결국 subheading-kor 부분에서 padding-top을 이용하니 되어서 처음에는 padding-top 값을 지정해 코드를 짰다. 근데 이건 아닌 것 같아 더 알아보았다..ㅎ
- 박스모델의 개념
Css에서 중요한 개념인 박스 모델! 이는 그냥 디폴트로 알고 있어야 되는 개념이지만, 동시에 조금은 헷갈릴 수도 있는 부분이기도 하다. 여기서 주목해야 할 부분은 바로 padding과 margin 각각의 의미와 차이다.
| Padding | Margin |
| - Border 내부의 공간 - Content와 Border 사이의 간격을 조절해주는 요소라고 생각하면 됨 |
- Border 외부의 공간 - 이웃하는 외부 요소들과의 간격을 조절해주는 요소라고 생각하면 됨 ⭐이웃하는 요소들의 간격을 벌리기 위해 위아래로 margin 값을 지정했을 때는 그 중 큰 값으로 margin 처리가 됨 |
여기서 포인트!
⭐이웃하는 요소들의 간격을 벌리기 위해 위아래로 margin 값을 지정했을 때는 그 중 큰 값으로 margin 처리가 됨⭐
이를 통해 처음 코드가 틀린 이유를 알 수 있다. (코드는 잘 못이 없고 사실 내가 해석을 잘 못한 거..) 이웃한 요소들인 introduce-content에서 margin-bottom 값을 100px로 지정해주고 subheading-kor에서 margin-top 부분의 값을 140px로 정했을때, 총 240px이 아니라 그 중 큰 값인 140px만 적용이 되어 140px만큼의 간격으로만 벌어졌다는 것이다.
그리고 이웃하는 요소들과의 간격을 벌리고 싶을 때는 margin 값을 이용합시다 padding 쓰지 말구..!
※ 참고자료
https://www.youtube.com/watch?v=HKVmR9mdGCc
https://blog.hubspot.com/website/css-margin-vs-padding
3. Clamp() 함수
h1{ /*행동하는 감자되기*/
color:#FF726C;
font-family:'GmarketSansLight';
font-size:clamp(40px, 4vw, 70px);
margin-bottom: 0px;
}
내가 참고했던 개발자 분의 웹사이트를 봤을때, 브라우저 크기에 따라 글자의 크기가 커지거나 작아지는 것을 발견했다.
그 분의 코드를 보다가 clamp() 함수를 발견하게 되었다!
반응형 타이포그래피를 구현하는 방법으로 미디어 쿼리나 calc()의 방식이 쓰였다.
하지만 최근에는 clamp() 함수를 이용해 한 줄로(!) 브라우저 크기에 따라 폰트 크기가 바뀌게 명령을 할 수 있게 되었다.
- 기본형
clamp(minimum, preferred, maximum);위 명령어를 바탕으로 브라우저 크기가 변하면 글자 크기가 변화한다.
minimum value에는 가장 작은 크기의 폰트 사이즈를 작성하면 되고, 반대로 maximum value에는 가장 큰 크기의 폰트 사이즈를 작성하면 된다. 보통은 preferred size의 크기에 맞춰져 폰트 사이즈가 결정되지만 브라우저 크기가 너무 작아지거나 커져 폰트 사이즈 범위가 minimum value와 maximum value를 넘게 되면 minimum value와 maximum value 크기로 폰트 사이즈가 결정된다.
예시를 드는 게 이해가 더 쉬울 것 같다.
| width: clamp(300px, 50%, 800px) 라는 명령어로 제시된 이미지의 너비가 결정이 되는 상황이다. 이때 preferred value의 경우 전체 너비의 50%로 결정이 되어있다. 첫째, 너비가 400px일 경우 preferred value는 200px가 되고, 이것이 이미지의 너비가 되어야한다. 하지만 이는 minimum value인 300px보다 작은 값이므로 범위를 초과해버린다. 따라서 이미지의 크기는 300px로 정해진다. 둘째, 너비가 1400px일 경우 preferred value는 700px가 되고, 이는 minimum value 300px과 maximum value 800px 사이에 존재하므로 이미지의 크기는 700px로 유지된다. |
- 응용
preferred values를 작성할 때 단순 폰트 사이즈를 설정하는 것이 아니라 calc()를 이용한 계산식을 넣어줄 수도 있다. %도 당연히 쓸 수 있다.
width: clamp(200px, 50% + 20px, 800px);
font-size: clamp(1.875rem, calc(1.625rem + 1vw), 3.75rem);
- 브라우저 지원 여부
모든 브라우저에서 지원이 가능하다!:)
※ 참고자료
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
https://dev.to/b3ns44d/improving-site-responsiveness-with-css-clamp-function-3119
https://8yd.no/article/web-typography-clamp-with-vw-needs-calc
'💻 Web > About ME Project' 카테고리의 다른 글
| 3. 목표 페이지 (0) | 2022.09.23 |
|---|---|
| 1. Intro-click 페이지 제작 (0) | 2022.09.23 |
- Total
- Today
- Yesterday
- TypeScript
- IGW
- VPC
- jwt
- Subnet
- AWS
- refresh token
- 그리디
- vpc peering
- 쿠키
- route table
- 투포인터
- ceos
- AwsCloudClubs
- 정렬
- 세오스
- react
- 프론트엔드
- 리액트를 다루는 기술
- 로그인 기능 구현
- cloud
- NaCl
- 이분탐색
- 리액트
- JWT 토큰
- DOM
- 바리바리
- 면접을 위한 CS 전공지식 노트
- 로컬스토리지
- access token
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 |