본문 바로가기

WEB55

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.
이미지 (IMAGE) 태그 img 태그 - 문서에 이미지를 삽입하는 태그, 닫는 태그가 없는 빈태그 src 속성 - img의 필수 속성으로 이미지의 경로를 나타내는 속성 alt 속성 - 이미지의 대체 텍스트를 나타내는 속성이다. - src속성과 마찬가지로 필수 속성 width/height 속성 - 이미지의 가로/세로 크기를 나타내는 속성 - 자동으로 픽셀 단위로 계산된다. - 없으면 이미지 원본 크기대로 노출, 둘중 하나만 선언하면 선언한 속성의 크기에 맞춰 자동으로 비율맞춰짐 2022. 7. 6.
리스트 (ul, ol, dl) ul(unordered list) - 태그는 순서가 없는 리스트를 표현할 때 사용한다. ol (ordered list) - 태그는 순서가 있는 리스트를 표현할 때 사용한다. dl(definition/description list) - 태그는 용어와 그에 대한 정의를 표현할 때 사용 한다. 2022. 7. 6.
CONTAINER (div, span) div 태그 - 블록 레벨 태그 (기본적으로 한줄을 생성해서 내용을 표현) - division (나누다) span 태그 - 인라인 레벨 태그(블록 레벨 요소의 한 줄 안에서 표현) - spanned (차지하다) 2022. 7. 6.

티스토리툴바