div 영역에서 ul li 태그 목록 가로정렬 및 margin 값 넣어 떨어뜨리기

2018. 9. 29. 00:04

오늘은 정말 중요한 내용입니다. 앞으로도 자주 써먹을 수 있을 그런 내용이므로 만약 저처럼 html 코딩을 배우시려고 마음을 먹으셨다면 꼭 이해하고 넘어가야 하는 영역입니다. 직업전문학교 다니기 전에 저도 무척이나 햇갈렸던 부분으로 선생님께서도 이 부분은 상당히 어려운 부분에 속한다고 말씀 하셨어요. 처음 들을 땐 무슨소린지 모를 수 있어도 자꾸 반복 학습하면 분명 이해되는 순간이 올 것입니다.

div 영역 안쪽에 리스트를 만들고, 해당 리스트를 가로배열헤서 적절히 떨어뜨리는 방법에 대해서 알아볼 것입니다. 최대한 알기쉽게 많은 부분을 스크린샷 했습니다. 하나하나 꼼꼼히 보시면서 배우시면 좋을 것 같습니다.

우선 지난시간에 배웠던 html 같은 페이지 내에서 div 영역 여러개 생성 후 원하는 위치로 바로 이동하는 방법에 대해서 배웠습니다. 그 연장선으로 오늘의 내용을 시작하겠습니다. div 안쪽에 ul 태그로 리스트를 만듭니다. 기본 구조는 위처럼 작성할 수 있습니다. 참고로 div 안쪽에 있는 id 값은 없어도 상관 없습니다. 또한 h2 요소도 없어도 됩니다.

이제 브라켓에서 미리보기를 하면 이렇게 노출이 될 것입니다. ul의 기본 속성값이 세로로 나열되고, 앞쪽에 검정색 동그라미로 메뉴가 구별이 되어지는데, 이 부분을 없애보겠습니다.

head 태그 안쪽에 style 태그를 만들고, 그 안쪽에 아래처럼 입력해 주세요.

ul li {list-style-type: none;}

이렇게 하면 리스트의 스타일을 없앤다는 뜻이 됩니다. 참고로 각 div 영역을 생성 후, 안쪽에 ul 태그 스타일을 각각 다르게 적용하고 싶으시다면 아까 필요없다고 언급했던 div id 값을 생성해서 부여해줘야 합니다. 이제 한번 미리보기를 해보겠습니다.

보시는 것 처럼, 앞쪽에 아이콘처럼 존재하던 검정 동그라미는 사라졌습니다. 이제 가로로 배열해 보겠습니다.

가로로 지정해주는 태그는 저 빨간색 부분 입니다.

ul li {list-style-type: none; float: left;}

이렇게 됩니다. float 태그가 수평으로 정렬하는 태그입니다.

보시는 것 처럼 완전 공간없이 딱딱 붙어있는것을 알 수 있습니다.

여기에 각 영역이 얼마나 되는지 확인하려면 테두리를 만들어주면 될텐데요, 해당 태그는 위처럼 넣으시면 됩니다. outline 을 1px의 두께로 도트 스타일로, 그리고 색상은 빨간색으로 하겠다는 뜻 입니다. 어떻게 적용되었는지 볼까요?

보시는 것 처럼 완전 1px의 틈도 없이 딱딱 붙어있음을 알 수 있습니다. 이렇게 하면 글씨가 서로 붙어서 보기 불편하므로 각 메뉴별로 일정 간격으로 떨어뜨려 주겠습니다.

여기에서 margin 태그를 사용하게 됩니다. margin 단독으로 쓰이기도 하지만, 특정 위치에 대한 간격을 떨어뜨리고자 할 때는 위처럼 margin-left를 씁니다. 방향에 따라 right, top, bottom 이 있습니다. 여기에서는 왼쪽을 기준으로 20px 떨어뜨린다는 의미 입니다.