정의 블록(block) 타입의 요소를 정렬하기 위해서는 다음과 같은 방법을 사용 가능 margin 속성을 이용한 가운데 정렬 position 속성을 이용한 좌우 정렬 float 속성을 이용한 좌우 정렬 margin 속성을 이용한 가운데 정렬 margin 속성값을 auto로 설정하면, 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬됨 이때, 해당 요소는 특정한 너비를 가져야 하며, 너비를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백으로 만들어짐 따라서 이 방법을 사용하기 위해서는 반드시 해당 요소의 width 속성값을 먼저 설정해야만 함 position 속성을 이용한 좌우 정렬 절대 위치 지정 방식(absolute position)으로 위한 요소는 정상적인 레이아웃에서 벗어나..
float 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만듦 현재는 웹 페이지의 레이아웃을 작성할 때 자주 사용됨 clear float 속성이 적용된 이후 나타나는 요소들의 동작을 조절함 컨테이너 요소에 float 속성이 적용되면 그 이후 등장하는 모든 요소들은 정확한 위치를 설정하기 어렵기 때문 따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 허용하여 이후 등장하는 요소들이 더 이상 float에 영향을 받지 않도록 설정해야 함 clear를 설정하지 않으면 위와 같이 원하는 의도대로 배치되지 않음 overflow float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소가 크면, 해당 요소가 일부 밖으로 흘러넘치게 됨 이때, ov..
정의 요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표 HTML 요소가 위치를 결정하는 방식을 설정 (요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표) 요소의 위치를 결정하는 방식은 다음과 같은 4가지 방식이 있음 정적 위치(static position) HTML 요소의 위치를 결정하는 기본값 top, right, bottom, left 속성값에 영향을 받지 않음 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식 정적 위치 지정 방식을 제외한 나머지 다른 방식(relative, fixed, absolute)들은 전부 어떤 기준에 대해 해당 요소의 상대적인 위치를 설정하는 방식임 상대 위치(relative position) HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식 고..
정의 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나로, 해당 HTML 요소가 웹 브라우저에 어떻게 보이는지를 결정 대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나를 가짐 👉 block 👉 inline 블록(block) display 속성값이 블록인 요소는 언제나 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지함 ex. , , , , , , ... 인라인(inline) display 속성값이 인라인인 요소는 새로운 라인에서 시작하지 않고, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지함 ex. , , , ... display 속성값을 인라인에서 블록으로 변경했더라도, 변경된 요소는 내부에 다른 요소를 ..
CSS란? 정의 HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다. Cascading Style Sheets의 약자이다. cascade는 '폭포'라는 뜻으로, cascading이란 정의되어 있는 세부적인 정의가 있다면 해당 값을 사용하고, 정의되어 있는 게 없다면 다음의 기본으로 지정되어 있는 것으로 넘어가는 것을 말한다. 웹 사이트의 스타일링 ＊ 우선 순위는 ↓ 이 방향이다. 이 흐름이 바로 cascading! Author style 개발자가 작성한 CSS 파일 ▪️ 태그 선택자 → 클래스 선택자 → 아이디 선택자 → 인라인스타일방식 → !important ▪️ cascading의 연결고리를 끊어내는 방법은 !important이지만, 가능하면 쓰지 않는게 좋다. Use..
Textarea 📌 멀티라인 일반 텍스트 편집 컨트롤을 나타낸다. cf. 는 간단한 한 단락의 글만 가능하다. 속성 autocomplete 컨트롤 값이 브라우저에 자동으로 완성될 수 있는지의 여부를 나타낸다. (on/off) autofocus 페이지가 로드됐을 때, 포커스를 오버라이드(ex. 사용자가 다른 컨트롤 폼에 타이핑)하지 않는다면, 폼 컨트롤이 입력 포커싱될지 지정한다. 이때, 문서에서 오직 하나의 폼 관련 요소만 이 속성이 지정될 수 있다. cols / rows textarea의 너비/높이를 지정한다. (CSS에서 height, width로 더 손쉽게 지정 가능) disabled 사용자가 컨트롤과 상호작용할 수 없도록 한다. maxlength / minlength 사용자가 입력할 수 있는 문자..
Radio 📌 임의의 그룹 내에서는 여러 값 중 단 하나만 선택할 수 있다. 👉 name : name의 값이 같은 것 중 하나를 선택한다. 👉 value : 선택했을 때 전달될 값을 나타낸다. 👉 checked : 해당 버튼을 선택된 상태로 만든다. radio 버튼은 체크박스 버튼과 달리 선택을 해제할 수 없다. Checkbox 📌 사용자가 여러 선택 사항 중에서 하나 이상의 값을 선택할 수 있게 한다. 👉 name : 전달할 값의 이름을 나타낸다. 👉 value : 전달할 값을 나타낸다. value 속성이 생략된 경우 기본 값은 on이다. 👉 checked : 해당 버튼을 선택된 상태로 만든다. Select 📌 특성 multiple : 다수의 항목을 동시에 선택할 수 있도록 한다. (윈도우는 ctrl ..
기본 구조 📌 사용자로부터 인풋(Input)을 받기 위한 태그 form 요소 스타일링 시 모든 elements의 유효성을 나타내는 CSS의 :valid와 :invalid 의사 클래스를 사용할 수 있다. 1) action (필수) 📌 action="API 주소" 해당 form을 처리할 로직이 있는 API의 서버 쪽에 접근 가능한 URL을 명시한다. , , 요소의 formaction 특성으로 재정의할 수 있다. [참고] formaction 이 제출 버튼인 경우, 제출한 정보를 처리할 URL을 명시한다. URL을 지정한 경우, 버튼의 양식 소유자가 가진 action 특성보다 우선한다. 양식 소유자가 존재하지 않으면 영향을 주지 않는다. 2) method (필수) 📌 method="GET | POST" 양식을 ..
blockquote 📌 인용 내용 어떤 문단이나 내용 전체가 하나의 인용문일 경우 사용한다. q보다 더 많이 사용하는 편이다. 주로 들여쓰기를 한 것으로 그려진다. 인용문의 출처 URL은 cite 특성으로 나타낸다. q 📌 문장 내에 작게 들어가는 인용문이 있을 경우 (별도 블록을 쓰지 않아도 될 짧은 인용문) 사용한다. 대부분의 브라우저에서 앞과 뒤에 따옴표를 붙여 표현된다. 인용문의 출처 문서나 메시지, URL은 cite 특성으로 나타낸다. [참고] cite 📌 저작물의 출처를 표기할 때 사용한다. 보통 브라우저에서 기울임꼴로 그려진다. 인용 및 출처 표기 예시 전체가 하나의 인용문으로 로 감싸준다. 태그를 이용해 문단 별로 나눠준다. 문서 내 짧은 인용문은 태그를 통해 나타낸다. 👉🏼 큰 따옴표를 ..
정의 목록을 사용하는 경우 1. 용어를 정의할 때 2. key-value로 정보를 제공할 때 Coffee Black hot drink Milk White cold drink 정의 목록을 사용하는 이유 단순히 용어 정의 시 사용할 수도 있지만 key-value 형태의 정보를 전달 할 때 , 보다 훨씬 더 풍부한 의미를 전달할 수 있기도 하다. 보통 손으로 필기할 때, 어떤 용어에 대한 정의를 나타내는 경우 콜론(:)이나 세미콜론(;)을 사용하곤 한다. 하지만 HTML 문서를 작성할 때는 콜론이나 세미콜론으로 나타낸다고 해서 브라우저가 용어에 대한 정의라고 이해하지 않는다. 그렇기 때문에 브라우저가 이해할 수 있도록 아래의 태그를 사용하여 용어에 대한 정의를 하고 있음을 나타내는 것이다. dl == desc..
