친절한효자손 취미생활

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 떨어뜨린다는 의미 입니다.




그러면 각 메뉴의 왼쪽을 기준으로 20px 씩 떨어졌음을 확인할 수 있습니다. 왼쪽으로 밀렸으니 리스트는 오른쪽으로 이동했습니다.




비슷하게 응용해 보겠습니다. 참고로 float: left; 대신에 display: inline; 으로 사용하는 경우가 있는데, 어떤 차이가 있는지 확인해 보겠습니다.




보시면 어떤 차이가 있는지 알 수 있습니다. float 로 적용했을 때에는 완전 딱딱 붙어있었는데, display: inline; 을 적용시키니까 보기좋게 적당히 떨어져 있음을 알 수 있습니다. 이건 그냥 참고로 알아두시면 좋을 것 같습니다. 끝.




"친절한효자손 취미생활" 을 검색!


이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

잠깐! 비밀로 남겨야 할 만한 내용인가요? 그렇다면 차라리 이메일을 보내주시기 바랍니다.

  1. 2019.12.17 10:53

    비밀댓글입니다

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2019.12.17 15:03 신고

      Q. 티스토리에서 글쓰기할 때 <body> </body> 내에서만 작성이 가능하잖아요. <head> 속에 <style> 을 작성하려면 스킨편집가서 한다는 건 아는데 문제는 페이지마다 다르게 설정할려면 어떻게 하죠?

      A. 안녕하세요, 페이지마다 다르게 한다는게 무슨 의미인지 잘 모르겠어요.