NAMU DAYS

STUDY/HTML & CSS

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

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

STUDY/HTML & CSS

UI / UX 웹 퍼블리셔 & 프론트엔드 [13] - 기본 레이아웃 종합[CSS2.0]

이번 실습은 저번까지 했었던 기본 레이아웃 실습을 종합 정리하는 실습이다. ○ 객체 [100 * 100 / 파란 배경 / 내부 여백 50 0 0 50] : padding을 활용하여 사이즈가 늘어나는 것을 항상 유의한다! → 150 * 150 [65 * 65 / 녹색 배경 / 내부 여백 35 0 0 35] : padding을 활용하여 사이즈가 늘어나고[100 * 100], c의 위치에 영향을 준다. 객체 .c [30 * 30 / 노란 배경 / b의 div 요소] : 처음 생성 위치는 margin : 0;으로 왼쪽 구석이지만, b의 padding: 35px 0 0 35px;을 통해 c 객체는 오른쪽 아래쪽으로 35px 0 0 35px만큼 밀린다. [50*50 / 회색 배경 / 내부 여백 150 0 0 150..

STUDY/HTML & CSS

UI / UX 웹 퍼블리셔 & 프론트엔드 [12] - margin & padding

이번에도 여전히- CSS2.0 실습을 진행하였다. 이번에 학습할 margin과 padding은, 앞으로도 계속 중요하게 사용할 태그이기 때문에 똥꼬에 빡 집중하고 공부했다. ★ margin & padding * margin : 외부 여백을 뜻하며, 간격을 주고 싶을 때 사용한다. * padding : 내부 여백을 뜻하며, 객체와 내용 사이의 간격을 줄 때 사용 → 내부에 여백을 주며 객체의 크기가 여백만큼 증가하기 때문에 이에 유의해서 사용할 것! ** margin / padding - 방향 : 크기; : margin과 padding에 방향성을 부여하는 기능이다. 각각 -top, -right, -bottom, -left를 부여할 수 있다. ex) margin-left: 500px; = 왼쪽 외부 여백을 ..

STUDY/HTML & CSS

UI / UX 웹 퍼블리셔 & 프론트엔드 [11] - 기본 레이아웃

저번 시간에 이어 CSS 2.0 실습을 진행하였다. 이번엔 border의 속성과 id, class의 개념을 익히고 갈 것이다. ○ id & class ** id : 스타일을 지정할 때 한 가지만 지정해 사용하는 이름 (표기방식은 #이름) 하나의 문서에 고유한 id 하나만 사용할 수 있다! ** class : 그룹으로 묶어 스타일을 지정할 때 사용하는 이름 (표기방식은 .이름) → id와 class 이름은 숫자로 시작할 수 없습니다. css1.0때는 style 속성을 사용하여 직접 객체를 꾸며주었지만, css2.0부터 id와 class 속성으로 선언한 후, 태그에서 지정하여 꾸며줄 수 있다. 이 때, id는 #id명 class는 .class명의 형태로 지정하여 꾸밉니다. ○ border 속성 border를..