초보 개발자의 개발 블로그

🐸 Flexbox Froggy란 ? CSS코드 게임으로 Flexbox의 속성을 요구한대로 입력하면 다음 단계로 넘어갈 수 있는 게임 Flexbox의 속성을 실습하며 익히기 좋다. * FLEXBOX FROGGY 이동 https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 13단계. 개구리를 순서를 반대로 + 아래로 이동 + 가로선 상 중앙 정렬 #pond { display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-end; } 14단계. 노란색 개구리를 제일 마지막으로 #pond { display..

🐸 Flexbox Froggy란 ? CSS코드 게임으로 Flexbox의 속성을 요구한대로 입력하면 다음 단계로 넘어갈 수 있는 게임 Flexbox의 속성을 실습하며 익히기 좋다. * FLEXBOX FROGGY 이동 https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 1단계. 개구리를 오른쪽으로 이동 #pond { display: flex; justify-content: flex-end; } 2단계. 개구리를 가로선 상 중앙 정렬 #pond { display: flex; justify-content: center; } 3단계. 수련잎 주위의 간격 고려하여 이동 #pond { display:..

선택자(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)은 '직렬의', '일렬로 늘어선'이라는 사전적 의미를 가진다. 인라인 요소는 줄바꿈을 일으키지 않고, 페이지의 전체 너비를 차지하지 않는다. 자기 데이터 요소만큼만큼의 공간만을 차지한다. 인라인 요소는 블록 요소 안에 포함되어 있으며 인라인 요소안에 다른 인라인 요소가 포함될 수 있다. , , , , , ..

시맨틱 태그(Semantic Tag)란? HTML5에서 의미론적 요소를 담은 태그의 등장 시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻이다. 즉, HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다. html5 이전의 html에서는 태그의 class와 id를 톻해 정의하였다면, html5에서는 미리 정의되어 있는, 의미를 정확히 전달할 수 있는 태그를 사용할 수 있게 되었다. 시맨틱 태그의 장점 시맨틱 태그를 통해 컨텐츠의 의미를 명확하게 전달해준다. 개발자 및 사용자 뿐만 아니라 검색엔진 등에 의미 있는 정보의 그룹을 태그로 표현 단순히 구역을 나누는 것 뿐만 아니라 의미를 가지는 태그들을 활용하기 위한 노력 Non semantic 요소는 div, span..

지금 작성하는 문서가 html5의 버전으로 작성 되었다고 웹 브라우저에 알리는 것 html 코드로 작성된 문서임을 알리는, 즉 html의 시작과 끝을 알리는 태그 웹 브라우저는 태그를 보고, 뒤따르는 HTML 코드를 해석해서 웹에 표현한다. html의 head, 즉 html문서의 머리글을 나타내는 태그 문서 제목, 문자코드(인코딩)와 같이 해당 문서의 정보를 담고 있으며, '메타 데이터의 집합'으로 웹 브라우저에 직접적으로 나타나지 않는 정보다. * 메타데이터 : 데이터에 대한 데이터 html의 body, 즉 html문서의 몸통, 본문을 나타내는 태그 웹 브라우저 화면에 나타나는 정보로 실제 내용에 해당한다. 요소 (Element) HTML 요소는 시작 태그와 종료 태그 그리고 태그 사이에 위치한 내용으..

HTML이란 HTML은 Hyper Text Markup Language의 줄임말로, 웹의 뼈대라고 할 수 있는 언어이다. HTMl을 이용해 뼈대를 잡고, CSS를 이용해 옷을 입히고, JavaScript를 이용해 기능을 설정한다. Hyper Text Markup Language Hyper 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태 Hyper Text 사용자가 필요한 정보를 자유롭게 찾아갈 수 있는 비순차적 텍스트 참조(하이퍼링크)를 통해 사용자가 한 문서에서 다른 문서로 접근할 수 있는 텍스트 Hyper Text Markup Language 표시, 부호를 통해 문서나 데이터의 구조를 표기한다. 태그 부호를 이용하여 역할, 의미를 부여한다 태그 등을 이용하여 문서나 데이..