NAMU DAYS

STUDY/HTML & CSS

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

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

STUDY/HTML & CSS

UI / UX 웹 퍼블리셔 & 프론트엔드 [14] - list-style [CSS 2.0]

이제는 딱히 언급이 없어도 제일 중요한 기본 레이아웃 실습을 진행하였다. ○ BODY 객체 .font : 윗 첨자와 아래 첨자를 나타내기 위한 객체 ** : 수학이나 영어에서 사용하는 윗첨자 ** : 수학이나 과학에서 사용하는 아래첨자 객체 : 파일 첨부를 위한 객체 ** input type="file" : 웹에서 흔히 보이는 "파일 선택" 기능을 구현한다. 객체 .ulcss : 현재 사용하고 있는 통신사를 조사하기 위한 리스트 생성 ** 태그 사이에 : radio로 구성된 를 생성한다. ○ HEAD [style] .font { font-family : "폰트명"} : 웹 표준을 맞추기 위한 기능으로써 웹에서 보일 폰트를 지정한다. .ulcss{ list-style: none; margin: 0; pad..