반응형 전체 글53 HTML id | 북마크 설정 id 속성의 값은 HTML 문서 내에서 고유해야 한다. HTML 문서에는 동일한 id를 가진 요소가 2개 이상 있을 수 없다. id 속성은, style sheet의 특정 style 선언을 가리키는 데 사용 된다. Javascript 에서 특정 id 를 가진 요소에 access 하고자 하는 경우에도 사용할 수 있다. id 구문은, 해쉬 문자(#)와 id 이름을 차례로 작성한 뒤, 중괄호 {} 안에 CSS 속성을 정의하면 된다. id 이름은, 대소문자를 구별한다. id 이름은, 하나 이상의 문자를 포함해야 하며, 숫자로 시작할 수 없고, 공백을 포함할 수 없다. Class 는 여러 HTML 요소에서 사용 할 수 있지만, id는 페이지 내에서 하나의 HTML 요소에서만 사용해야 한다. HTML 북마.. 2022. 8. 24. HTML Class | 클래스 HTML class 속성은, HTML 요소에 대한 class를 지정하는 데 사용 된다. 여러 HTML 요소가 동일한 클래스를 공유할 수 있다. Class 속성은, style sheet에서 class 이름을 가리키는 데 사용 될 수 있고,특정 class 이름을 가진 요소에 access하기 위해 Javascript 에서 사용 할 수도 있다. Class 이름은 대소문자를 구분한다. Class 속성은 어느 HTML 요소에서도 사용 가능하다. 이런식으로, style 에서 class 값을 city로 지정해주고 요소에서 class 값을 city로 입력해주면, style 태그 안에 있는 class 인 city 값을 끌고 와 적용시켜 준다. 는 해당 블록 전체를 꾸며줌.Inline 요소인 요소에서도, clas.. 2022. 8. 23. HTML Block & Inline | elements 의 특성 모든 HTML의 요소에는 default 된 기본 디스플레이 값이 있는데, 그 표시값은 Block 과 Inline 두 가지로 나뉜다. 항상 새줄에서 시작하고, 브라우저는 자동으로 요소 앞 뒤로 약간의 공백(여백)을 추가한다. Block 요소에 사용 되는 줄은, 전체 너비를 차지한다. 일반적으로 사용되는 두 가지 Block 요소는 와 이다. - : 문서의 단락을 정의 - : 문서의 구분 또는 섹션을 정의div 요소는 다른 HTML 요소의 컨테이너로 종종 사용된다. div 요소는 필수속성은 없지만, Style, class, id는 공통이다. div 요소를 CSS와 함께 사용하면, content 블록 스타일을 지정할 수 있다. ** Block-level elements **address> arti.. 2022. 8. 22. HTML Lists | 리스트 list 태그는 3가지로 분류된다. 1) Unordered list (CSS로 꾸며서 홈페이지 목록 bar처럼 목록화 해줄 수 있음) 2) Ordered list 3) Description list Unordered list 태그는 태그를 사용하고, list 안에 들어갈 각각의 아이템들은 태그를 사용하여 준다. Unordered list 는 default 값으로, bullets(작은 검정 동그라미) 서식이 붙게 된다. CSS로 List item Marker를 변경 할 수도 있다. list-style-type 특성을 사용 하면 된다. 종류는 아래와 같이 4가지가 있다. - disc : 작은 블랙 동그라미(default 값) - circle : 작은 흰색 동그라미 - 검정 테두리 - squar.. 2022. 8. 21. HTML Table Colgroup | 테이블열 빈칸 색상 채우기 | 셀 숨기기 태그는 테이블의 특정 열에 스타일을 지정하는 데 사용 된다. 각 그룹은 요소로 지정된다. span 속성은 스타일을 가져오는 열의 수를 말한다. style 속성은 열에 제공할 스타일을 지정한다. 태그는 반드시 태그의 자식 태그로 속해 있어야 한다. table > colgroup > col 이런식.... Colgroup 태그는 CSS로 표현할 수 있는 스타일링이 매우 제한적이다. - width- visibility - background - border col span 을 이용하면, 해당하는 열 만큼 style 로 꾸며줄 수 있다. col span 태그에 열 갯수만 지정해주고, style 을 지정해주지 않으면 된다. 셀 숨기기 기능은 visibility: collapse 를 사용하면 .. 2022. 8. 20. HTML Table Styling | 테이블표 색상 꾸미기 | 마우스 반응형 하이라이트 Table row를 스타일링 하기 위해선, :nth-child(even) 선택기능을 사용하면 된다. 태그 위치는 의 태그 안에 위치 시킨다. (even) 은 2,4,6 열에 스타일링 적용(odd) 는 1,3,5 열에 스타일링 적용 Vertical 로 수직 스타일링 하기 위해선, td(table data) 와 th(table header)를 꾸며주면 된다. : Combine Vertical & Horizontal Zebra stripes위에서 배운 스타일 두가지를 결합한 형태로 나타낼 수 있다. 열과 행에 모두 줄무늬가 생김.투명한 색상을 사용하면 겹치는 효과를 얻을 수 있다. 투명도를 반영 시키려면, rgba() 를 사용 하면 된다. 각 테이블 열의 밑줄 선만 살리고자 하는 경우, borde.. 2022. 8. 19. 이전 1 2 3 4 5 6 7 ··· 9 다음 반응형
