NAMU DAYS

STUDY/HTML & CSS

UI / UX 웹 퍼블리셔 & 프론트엔드 [17] - 퀵메뉴 만들기

이번 실습은 주로 네이버나 쇼핑몰을 정리해주는 사이트에서 자주 사용하는 "퀵메뉴" 실습을 진행하였다. ○ BODY 퀵메뉴의 큰 틀을 담당할 객체 .quickmenu 를 추가한 객체 .imgdiv : 퀵메뉴를 구성할 요소들에 상대경로로 이미지를 넣어주고 이미지를 누를 경우 이동할 사이트와 이동할 방식을 을 통해 지정해준다. 그리고, 객체는 세로로 쌓이기 때문에 3개씩 가로로 붙이기 위해 클래스에 별칭을 달아준다. ○ HEAD - .quickmenu 와 .imgdiv 를 통해 각 객체의 크기와 특성을 지정해 주고, 위로 당길 객체들은 별칭을 통해 당겨준다. ※ , 활용하여 적용해보기 를 쓰는 것과 별 차이 없이, 작은 요소 하나하나에 가로길이와 세로길이를 넣어주고 margin으로 잡아당긴다. 나중에는 이렇게..

STUDY/HTML & CSS

UI / UX 웹 퍼블리셔 & 프론트엔드 [10] - 기본 레이아웃 [HTML 4.0 & CSS 2.0]

CSS 2.0에 도달했다. HTML 3.0부터 CSS 1.0이 나왔으니 둘은 버전업 될 때마다 함께 출시된다 생각하면 된다. [현재 기준 : HTML 5.0 + CSS 3.0 / HTML6가 과연 나올까...?] 태그 + : 목차를 나타낼 때 사용하는 리스트 태그 은 큰 틀, 는 목차를 구성한다. 목차를 구분할 때, 디스크[disc] 모양을 사용하여 구분한다. 태그 + : 목차를 나타낼 때 사용하는 숫자형 리스트 태그 은 큰 틀, 는 목차를 구성한다. 목차를 구분할 때, 숫자를 사용하여 구분한다. 태그 : 레이아웃을 나타낼 때 사용하는 태그 속성 : border는 테두리를 적용할 때 사용하는 속성이며 "border 크기 형태 색상" 순서로 대입하여 적용할 수 있다. ** solid : 한 줄로 구성된 테..