코딩응애의 개발블로그

수코딩+드림코딩 보고 나만의 웹사이트 만들기 (html,css,js) 본문

HTML CSS

수코딩+드림코딩 보고 나만의 웹사이트 만들기 (html,css,js)

이너멜 2022. 7. 3. 22:53

css가 많이 부족한거 같아서 페어분이 알려주신 유튜버 수코딩님과 내가 예전부터 보던 드림코딩님 두분의 강의를 듣고

웹사이트를 한번 만들어 보았다. 확실히 직접 만드니까 많이 부족하다는걸 깨닫고 더 만들어볼 예정이다.

수코딩: https://youtu.be/33UvhCoPrmc  드림코딩 : https://youtu.be/X91jsJyZofw  

이 2개의 영상을 보고 만들었다. 2개 영상을 먼저 보고 각각 영상에서 만드는 웹사이트를 만들고 나서 내가 만들고 싶은 

사이트를 2개 영상에 쓰인 코드들을 바탕으로 만들었는데 거의 비슷하긴 하다...

근데 나중에 더 기능들을 추가할 예정!

 

서론이 길었네 일단 이 글은 웹사이트를 만들면서 몰랐던 개념들이랑 직면했던 문제들을 쓰고 그 문제들을 어떻게 

해결을 했는지 쓰는 글이다. 아마 기능을 추가할수록 지속적으로 업데이트 될듯? 

 

font-face

CSS at-rule 인 @font-face 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다.

사용자 컴퓨터에 폰트가 설치 되어있지 않아도 서버에서 내려받아서 사용할 수있는 방법

웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에 설치된 폰트만을 사용해야했던 제약이

없어지게되었다. 이건 수코딩님 영상보면서 첨 알게된 개념이다. 어떻게 쓰냐면 

@font-face {
    font-family: abster;
    src: url(font/abster-webfont.woff) format('woff');
} /* 미리 글씨체를 다운을 받아서 디렉토리에 넣어놔야 사용 가능 */

@font-face{
  font-family:"폰트이름";
  src:local("폰트이름1"), local("폰트이름2"), url("폰트주소") format("폰트포맷");
} 
/* 여기서 local은 사용자 컴퓨터에 폰트이름1이 설치되 어있으면 그걸 사용하고 없으면 폰트이름2를 
 사용 그 마저도 없으면 url에 있는 폰트주소에서 다운받아서 사용하라는 의미 */

폰트포맷은 폰트 확장자에 따라 달라진다.  

폰트 확장자명 폰트포맷
폰트명.woff woff
폰트명.eot embedded-opentype
폰트명.woff woff2
폰트명.otf opentype
폰트명.svg svg

출처 : https://moo-you.tistory.com/294   

 

linear-gradient 

그래디언트(gradient)란 둘 이상의 색 사이의 색상 표현을 부드럽게 전환해주는 효과를 의미.

CSS3에서 제공하는 그래디언트는 다음과 같이 두 가지 형태가 있다.

1. 선형 그래디언트(linear gradients)

2. 원형 그래디언트(radial gradients)

그래디언트에 투명도를 추가할 때에는 RGBA 색상값을 사용하면 된다.

RGBA 색상값의 알파 채널 값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가진다.

라고 하긴 하는데 사실 잘 이해가 가진 않음.. 그래도 어떤식으로 쓰냐면 

.container {
    background: linear-gradient(rgba(051,051,051,0.8),rgba(051,051,051,0.8)),url(images/isedol1.jpg);
    background-size: cover;
}

이렇게 쓰는데 이렇게만 쓸 수 있는게 아니다. 다른 방법들이 많은데 그냥 검색해서 보는게 나을듯 ㅇㅇ;

position : absolute 

내 블로그에 포스트 되어 있긴 한데 어떻게 쓰는지 까먹어서 정리를 하자면 

조상 요소 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다.

조상 중 Position을 가진 요소가 없다면 초기 컨테이닝 블록(<body>요소)를 기준으로 삼는다. (static을 제외한 값)

.container .idol {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

이런식으로 absolute 써주고 얼마큼 떨어질지 밑에다 작성한다. 처음에 할때 너무 오랜만이라서 left,top 저게 뭔지 몰랐음; 

 

transform: translate()

그렇다면 이건 무엇일까?  transform속성은 웹요소의 위치를 이동시키거나 크기 조절 및 회전시킬 수 있는 강력한 기능을 가지고 있기 때문 많은 속성들중 translate 에 대해 알아보자면

translate는 요소를 지정한 위치로 X 또는 Y축만큼 이동 시킨다. 그렇다면 저 -50% -50%는 무슨 이야기 일까? 

출처: https://liis.tistory.com/28  이분 블로그를 참고하면 좋다 쉽게말해서 가운데 정렬을 하는 방법중 하나이다.

가운데 정렬을 방법들 예를 들어서 text-align : center; margin: auto 0; 같은 것들 ㅇㅇ 외워두면 편리할듯 하다.

 

outline 

border가 테두리라면 outline은 테두리의 바깥 외곽선이다

주로, 레이아웃을 완성한 후에 문제점을 보기 위해 요소를 눈에 띄게 표시할 수 있다.

border 선을 표시한다면, border 너비가 레이아웃에 관여하기 때문에 레이아웃이 흐트러질 수 있는데  outline 선의 너비는 레이아웃에 관여하지 않고, 눈에만 선이 보인다. 

이거 설명을 검색해서 쓰다보니 예전에 정리한것 같아서 찾아보니까 있는데 좀 설명이 빈약해서 그냥 또 씀.

 

transition 

애니메이션 효과를 적용할 때 애니메이션 효과가 일정 시간에 걸쳐서 다양한 방법으로 진행 되도록 하는것

transition: all -> 속성을 각각 작성하지 않아도 all 을 입력해주면 모든 속성에 효과가 나타난다. 

.container .idol button:hover {
    background-color: #66CCCC;
    transition: all 1s;
}

버튼에 마우스를 올렸을때 1초간 서서히 버튼에 배경색이 변함. 

 

Element.classList.toggle

toggle, 전등 스위치를 껐다 켰다 하는 행위 처럼, 0과 1이 반복되는 행위를 의미.

toggle 메서드는 클래스가 존재한다면 클래스를 제거하고, 클래스가 존재하지 않는다면 클래스를 추가하는 메서드이다.

const toggle = document.querySelector('.toggle');
const menu = document.querySelector('.link');
const icons = document.querySelector('.icon');

toggle.addEventListener('click', () => {
    menu.classList.toggle('active');
    icons.classList.toggle('active');
})

active라는 클래스 명이 있다면 제거 없다면 추가를 해줌 위에 코드들을 아래에 정리할 예정 

 

addEventListener 

특정 이벤트(click하면 함수를 실행하라, 마우스를 올리면 함수를 실행하라 등등)가 발생했을 시 특정 함수를

실행할 수 있게 해주는 것.

위에 코드를 예시로 들자면 클릭을 했을때 이벤트가 발생하는것이다. 위에 설명한 classList.toggle 메소드가 

 

a href="#"

클릭 이벤트 발생시 페이지 전환을 하지 않도록 하기 위해서 쓰인다. #으로 의미없는 링크를 줘서 페이징이 안되도록 

하는 것이다. 클릭하면 화면 최상단으로 이동을 한다. 

 

defer 

브라우저는 html을 읽다가 script 태그를 만나면 스크립트를 먼저 실행해야 해서 스크립트 다운을 받고 실행을 한 후에야 남은 페이지를 처리할 수 가있는데 이때문에 만약 용량이 큰 스크립트가 있다면 다운받고 실행할때까지 스크립트 아래쪽 페이지를 볼 수 가없게되는 문제점이 생긴다. 이러한 문제점을 피하기 위해 맨밑에다가 스크립트 태그들을 놓곤 하는데 

만약 html 문서 자체가 아주 큰 경우에는 페이지가 엄청 느려지게 될것이다. 이러한 문제를 해결할 수 있는것이 

바로 defer 이다. 

브라우저는 defer 속성이 있는 스크립트(이하 defer 스크립트 또는 지연 스크립트)를 '백그라운드’에서 다운로드 한다.

따라서 지연 스크립트를 다운로드 하는 도중에도 HTML 파싱이 멈추지 않는다. 

출처 : https://ko.javascript.info/script-async-defer  여기서 더 자세히 확인할것 

 

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

'HTML CSS' 카테고리의 다른 글

드림코딩 유튜브 클론코딩 보고 새로 알게된점 + α  (0) 2021.11.14
드림코딩(유튜브 클론코딩 하면서 처음알게된것들 정리 )  (0) 2021.10.24
드림코딩 (웹사이트 따라 만들기, 반응형 헤더편) + 생활코딩  (0) 2021.10.04
드림코딩 & 생활코딩 (CSS Flex box)  (0) 2021.09.22
드림코딩&생활코딩(CSS 선택자, display, position)  (0) 2021.09.17
'HTML CSS' Related Articles more
Comments