공부하는 검이

지난 시간에 태그에 대해서 알아보았습니다. 최근 만들어지는 웹사이트들은 태그를 사용하지 않기 때문에, 반드시 알고 계시지 않아도 되지만 에 대한 좀 더 깊은 내용을 알아보려고 합니다. https://s-sun1146.tistory.com/11 태그의 선택적인 구성요소 , 태그는 태그를 구성하는 필수 요소였습니다. 이번 시간에는 선택적으로 사용해야할 요소들에 대해서 알아보겠습니다! 먼저 태그에 대해 알아보기 전에 사진을 통해 간단하게 표의 구성요소를 살펴보아요~ 표의 셀 중에 제목 역할을 하는 영역, 표의 셀 중에 합계, 결과 등 통합적인 데이터를 다루는 영역, 표를 설명해주는 표 제목 등의 요소는 태그를 사용할 때 필수적으로 사용되지는 않지만, 표의 구성요소들 중 하나입니다. : 표의 제목에 해당하는 영..

지금은 많이 쓰이지 않지만, 예전에 만들었던 사이트들은 웹사이트 전체 레이아웃을 배치할 때 태그를 사용하여 웹사이트를 만들었습니다. 지금도 이메일 코딩을 하게되면, 태그를 종종 사용하게 됩니다. 잘 사용하지만 알아야두어야 할 것 같아서, 태그에 대해 정리하려고 합니다. 태그의 기본 구성요소 : 태그는 표를 시작하겠다는 의미로, 표의 모든 셀을 감싸는 가장 큰 태그입니다. : 테이블의 행(줄)을 만드는 요소입니다. : 테이블의 열(칸)을 만드는 요소입니다. 이전에 리스트 태그에서 과 , 과 의 관계를 기억하시나요? (리스트 태그 바로가기!) [html 기초] 7 – 리스트 태그 안녕하세요 검이입니다~! 웹사이트를 보면 리스트 형태로 정리되어있는 항목들을 많이 볼 수 있습니다. 메뉴의 리스트나, 공지사항의 ..

웹사이트를 보면 리스트 형태로 정리되어있는 항목들을 많이 볼 수 있습니다. 메뉴의 리스트나, 공지사항의 글 리스트, 쇼핑몰의 제품리스트 등 웹사이트의 상당한 부분이 리스트로 구성되어 있습니다. 이번에는 리스트 태그에 대해 알아보도록 하겠습니다. 순서가 없는 목록 Unorder List 의 약자로 태그를 사용합니다. 순서가 없는 태그이기 때문에 리스트의 앞의 마커는 검정색의 작은 원 모양으로 표시되어 리스트를 구분해줍니다. 리스트 아이템을 표현하는 마커는 css를 사용하면 다른 모양으로 변경할 수 있습니다. 1. 리스트의 사용 태그는 리스트 전체를 묶어주는 태그라면, 리스트 각각 요소를 정의하기 위한 태그는 태그를 사용합니다. Facebook Tweeter linkedin 2. 태그 속성 type ul 태..

게시판 목록처럼 미리보기 형식으로 간략하게 내용을 보여주려고 할 때 말줄임 표시를 하는 경우 사용. 말줄임 표현하는 방법 / 한 줄 효과 지정된 영역을 넘어갈 때 말줄임( … ) 표현을 하기 때문에 width 값이 필요. width 값을 지정해야 하기 때문에 텍스트 영역에는 display:block 이나 display:inline-block 등 속성을 변경해주거나 block요소(p 태그)를 사용해 주어야 함. .box { display: block; overflow: hidden; text-overflow: ellipsis; white-space: no-wrap; } 말줄임 표현하는 방법 / 두 줄 효과 2줄 이상에서 말줄임 표현을 할 때 사용할 속성. 위의 예시는 항상 한 줄에서 영역을 넘어갈 때 말줄..

특정 요소를 선택하여 스타일을 적용할 수 있는 요소 HTML 페이지 안의 특정요소를 어떻게 렌더링 할 것인지 브라우저에게 알려주는 역할 css 선택자 css 선택자들 입니다. (빠진 요소들이 있을 수 있음!) 예시 ID 선택자 #id { ... } Class 선택자 .class { ... } tag 선택자 div { ... } 속성 선택자 input[type=”text”] { ... } 전체 선택자 * 하위 선택자 div ul 자식 선택자 div > ul 인접 형제 선택자 (바로 뒤따르는 요소만) div + ul 일반 형제 선택자 (뒤따르는 요소 전체) div ~ ul 가상클래스 선택자 -동적선택자 ::link ::visited ::active ::hover ::focus 가상클래스 선택자 -구조선택자 ..