전체 글

[리뷰] 완성된 웹사이트로 배우는 HTML&CSS 웹 디자인

안녕하세요! 완성된 웹사이트로 배우는 HTML&CSS 웹 디자인 책을 리뷰해보려고합니다. 현재 프론트엔드 공부를 하면서 UI의 중요성을 알게되었어요. 그래서 더 공부해보고싶다는 생각을 갖고있었어요. 책에 대한 소개를 하자면 크게 5가지의 웹 페이지를 중심으로 진행됩니다. 예제 코드를 주기 때문에 처음부터 모든 걸 하나하나 하는 것 보다 시작을 수월하게 할 수 있습니다. 목차들만 봐도 웹페이지들의 사소한 부분까지 신경써서 만든게 느껴졌어요. 파비콘이라던가 글꼴에 대해서도 자세히 알려주고 참고할 수 있는 사이트들도 추천해줘서 좋았어요. 단순히 만드는 방법만 알려주고 끝낼 수 있는데 CHAPER 7,8에서 더 효율적으로 관리하거나 사이트에 올려보는법처럼 구현하고 그 이상의 방법들에 대해서도 알려주더라고요. 그..

[CSS] height과 min-height 똑같아 보이는데 무슨 차이지?

요소를 가운데 정렬하기 위해서는 flex를 쓰고 align-items와 justfy-content는 가운데 정렬이 되게 한다는걸 알고 있다. body { display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; } 그런데 min-height : 100vh;를 적용했더니 화면을 기준으로 정가운데 정렬이 되었다.🤔 여기서 헷갈리는 점은 height : 100vh;와 min-height : 100vh;의 결과가 같아 보인다는 점이다. 이유는 min-height은 말 그대로 "최소 높이"라는 뜻인데 만약 값으로 min-height 100vh를 준다면 뷰포트 높이 100%가 최소값이 된다. 즉 요소의 최소높이..

TIL 34 :: 캡처링? 버블링?

이벤트는 코드의 순서대로 실행이 되는 줄 알았는데 캡처링과 버블링이라는것이 존재하고 그에 따른 순서가 있다고한다. 일명 캡캡캡 버버버인데 정리해보려고한다. 캡처링(Capturing) 위에서 아래로 간다 (큰 영역에서 작은 영역) 버블링(Bubbling) 버블버블 (위로 올라간다 거품이 생기면서 점점 위로 올라간다고 생각하기) 기본값이 false라 평소에 썼던 이벤트들은 전부 버블링이다. 둘의 차이가 뭘까 이벤트가 실행될때 캡처링이 먼저 일어나니깐 실행도 먼저된다는데 이해가 되지 않는다. 제출 => document의 이벤트에 세번째 매개변수자리에 true가 없으므로 이벤트 버블링 발생한다. (submit => document) submit.addEventListener('click', (event) => ..

TIL 33 :: SelectBox <select>없이 구현하기

https://joodb.github.io/dropdown-selectbox/ HTML 문제. , 이 아니다. - 처음 구현할 때 당연히 , 을 사용했을거라 예상하고 그렇게 만들어갔는데 전혀 아니었다. 중간에 저 margin으로 들어가야하는 부분이 구현되지 않는다. select와 option사이는 떨어트릴 수 없다. 이 부분을 몰라서 HTML만 두 번 만들었다. 해결. 최애프로그래밍 언어 부분은 , 아래 리스트는 로 만들고 > 으로 만들었다. JS 처음에 만든 코드에서는 list 영역을 for문을 이용해 하나하나에 접근했다. // selectBtn focus를 잃었을 때 list를 숨기고 삼각형 이미지의 각도를 원래대로 변경한다. selectBtn.addEventListener('blur', () => ..

TIL 30 :: JS 함수는 하나인데 이름은 3개(기본, 화살표, 익명)

함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환합니다.스크립트에서 함수를 사용하는 이유는 코드의 재사용성을 높이고 코드 구조를 파악하거나 유지보수를 할 때 용이하기 때문이다. 책을 만든다고 가정하면 이렇게 각 파트별 함수를 조립해서 쓰는 식이다. 표지() 속지() 잉크() 함수 선언문 - function function 함수이름(parameter1, parameter2...) { 실행코드... return 반환값 } 용어 번역 의미 Parameter 매개변수 함수와 메서드에 입력 변수 이름 Argument 전달인자, 인자, 인수 함수와 메서드에 실제 입력되는 값 파라미터와 아규먼트는 용어를 구분해야 합니다. 쉽게 **파선아실(파라미터는 선언, 아규먼트는 실..

TIL 29 :: [JS] 반복문

let data = [{ 반 : 1, 번 : 1, 이름 : "호준", 중간고사점수 : 55 }, { 반 : 1, 번 : 2, 이름 : "길동", 중간고사점수 : 60 }, { 반 : 1, 번 : 3, 이름 : "영희", 중간고사점수 : 30 }, { 반 : 1, 번 : 4, 이름 : "철수", 중간고사점수 : 20 }, { 반 : 1, 번 : 5, 이름 : "규리", 중간고사점수 : 100 }] 1. 중간고사 점수를 하나의 array로 만들어주세요. a) 메서드를 이용해서 구하기 console.log(data.map(x => x.중간고사점수)) b) for문을 이용해 넣어보기 test =[] for(let i = 0; i < data.length; i++) { test.push(data[i]['중간고사점..

TIL 27 :: [JS] 변수

보호되어 있는 글입니다.

TIL 26 :: [JS] Boolean Type

보호되어 있는 글입니다.

TIL 25 :: Git Bash 뿌시기

보호되어 있는 글입니다.

TIL 24 :: JS란? 변수와 자료형을 알아보자

JS는 어떤 언어일까? 웹브라우저가 해석해서 실행할수 있는 유일한 프로그래밍 언어로 사용자의 이벤트를 받고 내장 객체들을 이용한 CSS나 태그의 스타일 관련 속성, 날짜, 텍스트 등을 조작할 수 있다. 요즘에는 게임프로그래밍, 서버프로그래밍 등 다양한 분야에서 쓰여지고있다고 한다. 쉽게 얘기하자면 HTML에서 만들어진 을 제어해 클릭이 되었을 때 함수를 실행하는식으로 쓰인다. 그리고 인터프리터 언어이다. 인터프리터 언어는 별도의 실행 파일 없이도 바로 실행 가능하고 컴파일하는 과정이 없기때문에 수정, 디버깅에 유리하다. 인터프리터 언어와 컴파일 언어 .exe 같은게 이미 소스코드가 컴파일된 파일들이다. 기계가 알아듣기 편한 언어로 번역되어있다는것이다. 출력해보기 document.getElementById..