하와이 가는 여정

요소 단위를 내가 원하는 위치에 어떻게 배치할 것인지 알아보자. block 과 inline 가장 처음 살펴벌 프로퍼티는 display이다. display는 요소가 보여지는 방식을 지정하는 프로퍼티이다. display에 대해 알아보기 전에 아래의 예시를 보자. h1 태그 div 태그 span 태그 p 태그 a 태그 article 태그 strong 태그 li 태그 h1, div, p, article, li { background-color: pink; } span, a, strong{ background-color: skyblue; } 예시에서 h1, div, p, article, li 부분의 배경색을 pink로, span, a, strong 부분은 skyblue로 지정했다. 코드를 실행해보면 배경색만 지정..

텍스트 정렬 워드나 한글 같은 문서 편집기에서 다음과 같은 모양의 아이콘들을 본 적이 있을 것이다. CSS에서도 이와 동일한 기능을 하는 프로퍼티가 존재한다. text-align text-align 프로퍼티는 좌, 우 , 중앙 정렬을 합니다. 값으로 left, center, right를 사용할 수 있다 #right { text-align: right; } #middle { text-align: center; } #left { text-align: left; } html 소스코드 #up #up > p 오른쪽 정렬 #down #down > p 오른쪽 정렬 css 소스코드 p { text-align: right; background-color: pink; } #up { background-color: skyb..

글자(Text) 관련 스타일(1) 포스팅에서 font-family에 대해 알아보았다. 이번에는 font-style과 font-weight 에 대해 알아보자. font-style font-style로 가능한 값은 normal, italic, oblique 등이 있다. normal은 말 그대로 기본 값이며, 기본 글자체이다. italic 은 이텔릭체가 디자인되어 있는 기울인 스타일이고, oblique 은 단지 글자를 기울인 스타일이다. @import url('https://fonts.googleapis.com/css?family=Nanum+Pen+Script&display=swap'); h1, p { font-family: 'Nanum Pen Script', cursive; } h1{ font-style: ..

폰트 종류와 웹 폰트 폰트와 관련된 프로퍼티는 크게 폰트 크기(font-size), 폰트 종류(font-family), 폰트 형태(font-style, font-weight) 가 있다. 폰트 종류(font-family) font-family를 통해 원하는 폰트의 종류를 지정할 수 있다. font-family: '폰트이름1' '폰트이름2'; 일반적으로 한 단어로 구성된 폰트명은 따음표 없이 사용할 수 있다. 하지만 띄어쓰기 또는 하이픈(-)이 들어간 폰트명의 경우 따옴표를 사용하여 하나의 폰트명임을 명시해야한다. /* ✅ 올바른 한 단어 폰트 이름 */ font-family : Arial; /* ✅ 올바른 한 단어 폰트 이름 */ font-family : 'Arial'; /* ❌ 잘못된 두 단어 이상 폰트..

HTML의 모든 요소는 상자(Box)의 형태를 갖고 있다. 태그 내부에 위치해 실제 표시되는 내용을 Content(내용)라고 한다. 보이지 않지만 이러한 컨텐츠를 감싸고 있는 다른 요소들이 있다. 아래 그림과 같이 박스 형태 전체를 가리켜 박스 모델(Box Model)이라고 부른다. 내용(Content)는 이미지나 텍스트와 같이 우리가 코드 상에서 태그 사이에 담는 내용, 즉 실제로 담고 있는 부분이다. 경계선(Border)은 말 그대로 컨텐츠를 감싸고 있는 테두리이다. 패딩(Padding)은 여백이라는 뜻으로 컨텐츠와 경계선 사이의 여백이다. 마진(Margin)은 경계선 밖의 여백이다. 지금부터 박스 모델에 대해 자세히 알아보자. Content #inner { background-color: pink;..

복합 선택자에 들어가기에 앞서 HTML 요소 사이에 존재하는 부모와 자식이라는 개념에 대해 이해가 필요하다. 부모(article)와 나(div), 자식(p)이란 연결 관계를 가지는 요소들이 존재한다고 하자. 를 기준으로 안에 포함되는 하위 요소 는 의 자식요소(Child Element)이고, 의 상위 요소인 article은 의 부모요소(Parent Element)이다. 부모 - 자식 관계는 상대적이다. 를 기준으로 하면 가 부모 요소가 된다. 부모 요소 나 자식 요소 1 자식 요소 2 자식 요소 3 그리고 그 자식 요소와 그 아래에 포함된 태그들을 아울러 후손 요소(Descendant Element)라고 부른다. 즉 부모 아래의 모든 하위 요소들은 후손 요소인거다. 자식 선택자(Child Selector..

선택자(Selector)는 크게 아래와 같이 분류할 수 있다. 단순 선택자 복합 선택자 가상 클래스 선택자 단순선택자로 사용할 수 있는 것은 다음과 같다. 타입 선택자(Type Selector) 아이디 선택자(Id Selector) 클래스 선택자(Class Selector) 전체 선택자(Universal Selector) 속성 선택자(Attribute Selector) 타입 선택자(Type Selector) 타입 선택자(Type Selector)는 해당 태그를 가지는 모든 요소에 스타일을 적용한다. css 소스코드 p { color: red; } 아이디 선택자(Id Selector) 아이디 선택자(Id Selector)는 아이디 이름으로 스타일을 적용한다. HTML 문서내에서 중복된 아이디는 존재할 수 ..

CSS는 Cascading Style Sheets의 약자이다. Style Sheets는 '스타일 문서들' 이라는 뜻으로 "글자 크기는 13px", "본문 내용 오른쪽에 여백은 13px"와 같이 웹 페이지와 관련한 스타일을 지칭한다. Cascades는 '폭포가 되어 떨어지다'이라는 뜻으로 CSS에서 스타일이 적용될 때 우선순위를 가지고 순차적용이 된다는 특징을 표현한다. CSS의 기본구조 CSS는 웹에 적용할 스타일을 적어둔 일종의 스타일 명세서이다. 선택자(Selector)-속성(Property)-값(value) 의 구조를 가진다. 선택자는 HTML에서 태그를 가리킨다. CSS에서는 ,(콤마)로 선택자 여러 개의 스타일을 한꺼번에 저정할 수 있다. h1, p { color: red; } CSS에서 프로퍼..

*테이블 태그 는 table heading 는 table data table row 나이 직업 이름 23 대학생 김구름 24 직장인 구우름 테이블을 조금 변형해보겠다. 나이 23 24 직업 대학생 직장인 이름 김구름 구우름 테이블 태그에는 두 행 혹은 두 열을 차지하게 하는 속성이 있다. colspan 과 rowspan이다. colspan="숫자"는 "숫자"만큼 셀이 행을 점유합니다. rowspan="숫자"는 "숫자"만큼 셀이 열을 점유합니다. 나이 23 24 직업 대학생 이름 김구름 구우름 나이 23 24 직업 대학생 이름 김구름 구우름 *목록(List) 목록은 크게 순서가 없는 목록(Unordered List)과 순서가 있는 목록 (Ordered List)로 나뉜다. 순서가 없는 목록(Unordere..

태그 action과 method 속성은 필수로 사용해야 한다. action 속성은 데이터를 보낼 URL을 지정한다. method 속성은 보내는 방싱을 지정한다. -> get 또는 post 값을 가진다. GET 방식은 서버에 데이터를 요청하고 데이터를 받아오는 역할을 수행한다. 즉, 데이터 조회가 목적이다. 그래서 주소와 내용이 그대로 노출이 된다. POST 방식은 서버에 있는 데이터를 쓰거나 수정, 삭제할 때 주로 사용한다. 데이터를 보호한다. 따라서 로그인이나 게시물 작성, 회원가입 등 데이터에 대한 보안이 필요한 경우 사용한다. 태그 주로 사용자에게 입력을 받기 위해 사용되며, 빈 요소이기 때문에 종료태그를 사용하지 않는다. type 속성을 설정하여 어떤 값을 입력할 것인지 결정한다. text ema..