Frontend 4

[JavaScript] 무명 함수(anonymous function), 화살표 함수(arrow function)

기존의 함수는 function 키워드 뒤 함수의 이름을 써주고 중괄호로 둘러싼 코드 블록을 만들어주면 된다. function add(x, y) { return x + y; } 화살표 함수 ES6에 도입된 화살표 함수는 기존의 함수 function을 간결하게 작성할 수 있도록 해준다. 화살표 함수는 function 선언 대신 => 화살표를 써주면 된다. 함수 몸체의 코드가 한 줄인 경우에는 중괄호가 생략 가능하지만, 여러 개의 문장이라면 중괄호와 return을 반드시 넣어야 한다. 아래 4개의 add 함수는 모두 같은 기능을 하는 화살표 함수이다. 반환값을 보기 좋게 소괄호로 감싸줄 수도 있다. const add = (x, y) => { return x + y; };​ const add = (x, y) =..

[CSS] 레이아웃 display, position

블록(block) 요소 블록 요소는 브라우저의 한 줄을 모두 차지한다. (너비 100%) 위치와 크기 지정이 가능하다. 속성이 블록인 상자들은 컨테이너 블록의 맨 위에서 시작하여 수직으로 하나씩 배치된다. , , , , , , , , , , 등이 있다. 인라인(inline) 요소 한 줄에 차례대로 배치되며 현재 줄에서 필요한 너비만큼 차지한다. 위치와 크지 지정은 무시된다. 속성이 인라인인 상자는 콘테이너 블록의 상단에서 하나씩 차례로 수평으로 배치된다. , , , , , , 등이 있다. 인라인 블록(inline-block) 요소 인라인 요소처럼 한 줄에 차례대로 배치되며, 블록 요소처럼 위치와 크기 지정이 가능하다. block block inline inline inline-block inline-bl..

Frontend/CSS 2023.07.26

반응형 헤더(Responsive Header) 만들기

유튜브에서 드림코딩by엘리님의 영상을 보고 따라 만들어본 반응형 헤더 헤더 부분에는 css 파일과 구글 폰트를 link로 연결해주고 script로 js파일과 아이콘을 사용할 수 있는 폰트 어썸을 연결해주었다. Home Gallery Weddings FAQ Bookings nav라는 박스 안에 크게 세 구간으로 나눴다. 로고가 들어가는 div 박스 하나와 메뉴 부분과 아이콘들이 들어가는 박스는 리스트로 구현했다. navbar_toggleB 클래스는 모바일 버전으로 바뀔 때 나오는 버튼이다. body{ margin: 0; font-family: 'Ysabeau Infant', sans-serif; background-color: rgb(255, 252, 240); } .navbar{ display: flex..

Frontend/실습 2023.07.26