본문 바로가기

WEB/html & css22

가상 클래스(의사 클래스) pseudo-class 가상 클래스(의사 클래스) pseudo-class - css에서 의사 클래스(pseudo-class)는 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용한다. 1. 동적 의사 클래스(dynamic pseudo-classes) - :link = 링크의 기본 상태이며, 사용자가 아직 한 번도 이 링크를 통해 연결된 페이지를 방문하지 않은 상태 - :visted = 사용자가 한 번이라도 이 링크를 통해 연결된 페이지를 방문한 상태 - :hover = 사용자의 마우스 커서가 링크 위에 올라가 있는 상태 - :active = 사용자가 마우스로 링크를 클릭하고 있는 상태 - :focus = 키보드나 마우스의 이벤트 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태 2.. 2023. 4. 14.
기본값이 inherit CSS 속성 기본값이(default) inherit인 속성은 부모가 설정한 값으로 같이 바뀜. 단, 자식이 직접 값을 입력하면 입력한 값이 적용됨. *기본값이 inherit인 속성 - color - font-size - text-align - font-weight - text-decoration *기본값이 inherit이 아닌 속성 - display - width - height - background-color - letter-spacing - margin - padding - border-radius 2022. 8. 25.
block 속성 정렬 inline-block, inline - 수동적으로 정렬됨 - 부모의 text-align 속성에 의해 block - 능동적으로 정렬 - margin 을 이용 - 우측 : margin-left: auto; - 가운데: margin:0 auto; - 왼쪽 : margin-right: auto; (default 값이 왼쪽이기 때문에 굳이 사용안해도 된다) 2022. 8. 24.
display 속성 정리 종류 inline-block, inline block none 너비 너비가 없으면 최소한으로 줄어든다. 너비가 없으면 최대한으로 넓어진다. x 높이 높이가 없으면 최소한으로 줄어든다. 높이가 없으면 최소한으로 줄어든다. x 본질 글자화 블록화 - 속성 한 줄에 최대한 여러개가 나온다. 한 줄을 무조건 혼자 쓴다. - 정렬 부모의 text-align에 의해서 정렬 스스로 margin-left, margin-right를 사용해서 정렬 - 예외 1) a, span 엘리먼트는 기본적으로 display가 inline이다. 2) img 엘리먼트는 기본적으로 display가 inline-block 이다. 3) inline요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다. 2022. 8. 24.
선택자(Selector) 요소 선택자(태그 선택자) h1{color: green;} h2{color: red;} h3{color: black;} h4{color: skyblue;} h5{color: yellow;} h6{color: white;} 그룹화 h1, h2, h3, h4, h5, h6 {color: green;} 문서 내에 모든요소 *{margin : 0 auto;} class 선택자 - 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법 - html태그에 class 속성 추가해야 한다 - class 속성은 글로벌 속성이므로 어느 태그에서도 사용할 수있다 - 공백으로 구분하여 여러 개의 class 값을 넣을 수 있다 - class 선택자를 사용 할 때는 .(마침표)를 사용한다 id 선택자 - id 선.. 2022. 7. 12.
CSS문법과 적용 ● 선택자 (selector) ● 속성 (property) ● 값 (value) ● 선언(declaration) ● 선언부(declaration block) ● 규칙(rule set) div { border : 1px solid red; } /*선택자, 속성, 값, 선언*/ 2022. 7. 12.
블록 & 인라인 Block Level 요소 : 한 줄에 하나의 요소 표시 - 부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소 - div, h1~h6, p, ul, li, table Inline Level 요소 : 한 줄에 여러개의 요소 표시 - 하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소 - span, i, img, em, strong, a 예외 경우 - 는 인라인 레벨 요소지만 자손으로 블록 레벨 요소를 가질수 있다. 2022. 7. 7.
폼 관련 요소(FORM)4 lable - form 요소의 이름과 form 요소를 명시적으로 연결시켜주기 위해 사용 - form 요소의 id 속성값과 의 for 속성값을 같게 적어야함 - 을 사용하면 이를 클릭했을 경우 해당 form요소를 클릭한 것처럼 동작 - screen 리더기를 통해 듣게 되면 해당 form 요소에 접근 시 함께 읽어주게됨 - 사용성, 접근성적인 측면으로 중요한 역할을 함 fieldset, legend - fieldset = 여러개의 폼 요소를 그룹화 하여 구조적으로 만들기 위해 사용 - legend = 폼 요소의 제목으로 내부에 작성 form - form 요소를 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해주는 역할을 함 - fieldset 으로 구조화 되어있다면 도 함께 감싸는 역할을 함 - form 속.. 2022. 7. 7.
폼 관련 요소(FORM)3 select - 선택 목록 상자 또는 콤보박스 - 으로 각 항목을 나타냄 - 속성으로는 selected가 있으며 이는 선택된 항목을 의미 textarea - 여러줄의 텍스트를 사용할때 사용 - cols : 가로 크기를 조절하는 속성 - rows : 세로 크기를 조절하는 속성 button - input 타입의 submit, reset, button과 모두 같은 기능을 가진 버튼 - 차이점은 빈태그가 아니어서, 내용을 직접 넣을 수 있으므로 자유로운 스타일 표현가능 좋아하는 운동 : 축구 야구 농구 자기소개 : 로그인 2022. 7. 7.
폼 관련 요소(FORM)2 type = file - 파일을 서버에 올릴때 사용 type = submit - form의 값을 전송하는 버튼 type = reset - form의 값을 초기화 하는 버튼 type = image - 이미지를 삽입할 수 있는 버튼(submit과 동작이 동일함) - 이미지 관련 속성인 src, alt 속성이 반드시 필요함 - width, height 속성도 적용할 수 있다. type = button - 아무 기능이 없는 버튼 2022. 7. 7.
폼 관련 요소(FORM) 폼 요소 - 서버에 데이터를 전달하기 위한 요소 - 내용이 없는 빈 요소이며 type속성을 통해 여러 종류의 입력 양식으로 나타냄 type 속성 text = 아이디, 이름, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용 password = 암호 같은 공대할 수 없는 내용을 입력할때 사용 radio = 라디오 버튼을 만들 때 사용 checkbox = 체크 박스를 만들 때 사용, 중복 선택 가능 라디오 버튼과 체크박스, checked, name 속성이 존재한다 checked 속성은 값이 존재 하지 않은 boolean 속성 (값이 존재 = true, 값이 없음 = false) name 속성은 라디오 버튼과 체크박스를 그룹화 시켜주는 속성 2022. 7. 7.
표(TABLE) tag →column(열) ↓row(행) - = 데이터 셀 (table-column) - = 제목 셀을 나타내는 태그 - = 행을 나타내는 태그(table-row) - = 표 - = 표의 제목을 나타내는 태그 - = 제목 행을 그룹화 하는 태그 - = 바닥 행을 그룹화 하는 태그 - = 본문행을 그룹화 하는 태그 - rowspan = 행(세로) 병합 - colspan = 열(가로) 병합 * HTML5 : 의 위치가 앞에 와도 되고, 뒤에 와도 상관 없음 values 1 2 3 4 5 6 결과값 2022. 7. 6.

티스토리툴바