초보 개발자의 개발 블로그

CSS Position 문서 상에서 요소를 배치하는 방법을 지정한다. static : 모든 태그의 기본 값(기준 위치) 일반적인 요소의 배치 순서에 따른다. (좌측 상단) 부모 요소 내에서 배치될 때는 부모 요소의 위치를 기준으로 배치된다. 아래는 좌표 프로퍼티(top, bottom, left, right)를 사용하여 이동이 가능(음수 값도 가능) relative absolute fixed static div { height: 100px; width: 100px; background-color: #9775fa; color: black; line-height: 100px; text-align: center; } relative relative : 상대 위치 자기 자신의 static 위치를 기준으로 이동 레..

CSS Display display : block 줄 바꿈이 일어나는 요소 화면 크기 전체의 가로 폭을 차지한다. 블록 레벨 요소 안에 인라인 레벨 요소가 들어갈 수 있다. * 대표적인 블록 레벨 요소 https://developer.mozilla.org/ko/docs/Web/HTML/Block-level_elements 블록 레벨 요소 - HTML: Hypertext Markup Language | MDN HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다. 이 글에서 developer.mozilla.org display : inline 줄 바..

CSS Box model 모든 HTML 요소는 box 형태로 되어있다. 하나의 박스는 네 부분의 영역으로 이루어져 있다. margin border padding content Margin 테두리 바깥의 외부 여백 배경색을 지정할 수 없다. .margin{ margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; } .margin-1{ margin:10px; /* 상하좌우 모두 10px */ } .margin-2{ margin:10px20px; /* 상하 / 좌우 */ } .margin-3{ margin:10px20px30px; /* 상 / 좌우 / 하 */ } .margin-4{ margin:10px20px30px40px;..

CSS 상속 CSS는 상속을 통해 부모 요소의 속성을 자식에게 상속한다. 속성(프로퍼티) 중에는 상속이 되는 것과 되지 않는 것들이 있다. 상속 되는 것 예시 Text 관련요소(font, color, text-align), opacity, visibility 등 상속 되지 않는 것 예시 Box model 관련요소(width, height, margin, padding, border, box-sizing, display), position 관련요소(position, top/right/bottom/left, z-index) 등 * 참고 https://developer.mozilla.org/ko/docs/Web/CSS/inheritance 상속 - CSS: Cascading Style Sheets | MDN ..

가상 클래스 (pseudo-class) / 가상 요소 선택자 (pseudo-element) 가상 클래스가 실제로 존재하는 요소에 클래스 추가 없이 디자인을 입히기 위한 것이라면, 가상 요소는 아예 실제로 존재하지 않는 요소를 만들게 해준다. 선택자:가상클래스 { 속성: 값; } :link, :visited, :hover, :active, :focus :link, 방문하지 않은 링크 :visited, 방문한 링크 :hover, 해당 요소에 커서가 위치할 때 :active, 요소가 활성화 되었거나 클릭 되었을 때 :focus, 해당 요소에 초점이 맞춰졌을 때 a:link { color: blue; } a:visited { color:purple; text-decoration: none; } a:hover {..

결합자 / 복합 선택자 (Combinators) 일치 결합자(Basic Combinator) 동시에 만족하는 요소 선택 span.orange { color : red; } 이건 오렌지가 아닙니다! 이건 오렌지가 아닙니다! 이건 오렌지 입니다!! 태그 선택자 span을 찾아 클래스 선택자 orange를 선택 자손 결합자 (Descendant Combinator) selectorA 하위의 모든 selectorB 요소 div span { color: red, } 이건 빨강입니다! 이건 빨강이 아닙니다. 이건 빨강입니다! 자식 결합자(Child Combinator) selectorA 바로 아래 selectorB 요소 div > span { color: red, } 이건 빨강입니다! 이건 빨강이 아닙니다. 이건 ..

선택자(Selectors) HTML 문서에서 특정한 요소를 선택하여 스타일링 하기 위해서는 반드시 선택자라는 개념이 필요하다. 기본 선택자 전체 선택자, 요소 선택자 class선택자, id 선택자, 속성 선택자 결합자 / 복합 선택자 (Combinators) 자손 결합자, 자식 결합자 일반 형제 결합자, 인접 형제 결합자 가상 클래스 / 요소 (pseudo class) 링크, 동적 가상 클래스 구조적 가상 클래스, 기타 가상 클래스, 가상 엘리먼트, 속성 선택자 전체선택자 (Universal Selector) HTML 페이지 내부의 모든 태그를 선택 요소 선택자 / 태그 선택자 (Type Selector) HTML 요소를 직접 지칭하는 가장 간단한 선택자 클래스 선택자 (Class Selector) 주어..

CSS란 무엇인가? CSS(Cascading System Sheets)는 스타일, 레이아웃 등을 통해 문서(HTMl)를 표시하는 방법을 지정하는 언어이다. HTML이 정보를 표현한다면 CSS는 HTML문서를 시작적으로 이쁘게 꾸며주는 역할을 한다. CSS를 통해 정보(HTML)와 디자인(CSS)를 분리하여 관리할 수 있다. 정보를 수정하지 않고 디자인만 변경할 수 있다. 태그에 style 속성을 주면 소스코드가 지저분해 지는데, 분리하여 관리하게 되면 유지보수 및 가독성이 좋아진다. 검색엔진이 HTML을 해석 가능하도록 하기 때문에 더 많은 방문자들이 방문할 수 있도록 유도할 수 있다. 시각장애인을 위한 스크린리더 프로그램이 HTML문서를 해석하도록 할 수 있다.(웹접근성) CSS 구문 CSS는 규칙 기..

[HTML실습] 코로나19, 학생 건강설문 페이지 만들어보기 학생 건강 설문> 이름을 기재해주세요. 지역을 선택해주세요. 선택 서울 대전 대구 부산 제주 오늘의 체온을 선택해주세요. 37도 미만 37도 이상 Google 설문지를 통해 개인정보(비밀번호 등)를 제출하지 마시오.

모든 HTML 요소들은 스타일링을 위해 각 요소의 특성에 따른 기본 표시 값(default value)을 가진다. default value 는 블록 요소(Block-level Elements)와 인라인 요소(Inline-level Elements) 두 가지 범주로 나뉜다. 즉, 모든 HTML 요소는 블록레벨 요소이거나, 인라인 요소 둘 중 하나이다. 인라인 / 블록 요소 인라인 요소 인라인(inline)은 '직렬의', '일렬로 늘어선'이라는 사전적 의미를 가진다. 인라인 요소는 줄바꿈을 일으키지 않고, 페이지의 전체 너비를 차지하지 않는다. 자기 데이터 요소만큼만큼의 공간만을 차지한다. 인라인 요소는 블록 요소 안에 포함되어 있으며 인라인 요소안에 다른 인라인 요소가 포함될 수 있다. , , , , , ..