studio.heelab

교재: 소플의 처음 만난 리액트 Ch00. 준비하기HTML 살펴보기HTML이란 웹사이트의 뼈대를 구성하기 위해서 사용하는 마크업 언어태그를 사용하여 웹사이트 구조 만들고, 웹사이트에 들어갈 내용 채워 넣을 수 있다. 태그 - HTML의 시작과 끝을 알리는 태그 태그 - 어떤 웹사이트인지 알 수 있는 여러 가지 속성(제목, 설명 등)을 담고 있는 곳 태그 - head 태그 안에서 제목을 넣기 위해 사용 - 웹사이트에서 보이는 콘텐츠를 담는 태그 SPA (Single Page Application)복잡한 웹사이트 접속 시, 각 페이지별로 HTML 파일이 따로 존재하며, 페이지를 이동하게 될 경우 브라우저에서는 해당 페이지의 HTML 파일을 받아와서 화면에 표시한다.→ 수십, 수백 개의 HTML 관리하기 위..

교재: Do it! HTML+CSS+자바스크립트 웹 표준의 정석 손자요소 하위 선택자 - 상위 요소와 하위 요소를 공백으로 구분section p { color: blue; } /*section " data-og-host="ewhacse.tistory.com" data-og-source-url="" data-og-host="ewhacse.tistory.com" data-og-source-url="https://ewhacse.tistory.com/56" data-og-url="https://ewhacse.tistory.com/56" data-og-image="https://blog.kakaocdn.net/dna/CSCPf/hyZNUR6FM4/AAAAAAAAAAAAAAAAAAAAAIfqJwX6wDB5b62ls_LRbX7rUDTW_9ahh6Qy9HGoJ6Sk/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1764514799&allow_ip=&allow_referer=&signature=2vU3Pg%2FzaYn3zJkmEAtVLH9fCGY%3D

교재: Do it! HTML+CSS+자바스크립트 웹 표준의 정석 자식요소>손자요소 하위 선택자 - 상위 요소와 하위 요소를 공백으로 구분section p { color: blue; } /*section " data-og-host="ewhacse.tistory.com" data-og-source-url="https://ewhacse.tistory.com/55" data-og-url="https://ewhacse.tistory.com/55" data-og-image="https://blog.kakaocdn.net/dna/LYTFs/hyZNt1liGX/AAAAAAAAAAAAAAAAAAAAAFNBls0WX_h_uQ_lmLmGA6XmI3CErakIDpdZ-p5uSyoa/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1764514799&allow_ip=&allow_referer=&signature=%2Bx7z3Y6HmeZuqN4ykMYDdc1PnvE%3D

교재: Do it! HTML+CSS+자바스크립트 웹 표준의 정석 반응형 웹 만들기교재: Do it! HTML+CSS+자바스크립트 웹 표준의 정석 10장. 반응형 웹과 미디어 쿼리반응형 웹 알아보기반응형 웹 디자인이란, 웹 요소를 화면 크기에 맞게 재배치하고 표시 방법만 바꾸어 사이트를ewhacse.tistory.com 13장. CCS 고급 선택자연결 선택자하위 요소>자식요소>손자요소 하위 선택자 - 상위 요소와 하위 요소를 공백으로 구분section p { color: blue; } /*section 요소의 모든 하위 p 요소를 파란색 글자로 지정*/ 자식 선택자 -자식 요소에만 스타일 적용 > 기호로 구분section > p { ... } 형제 요소 스타일 적용->부모 요소가 같은 경우형 요소, 동..

교재: Do it! HTML+CSS+자바스크립트 웹 표준의 정석 CSS 다루기교재: Do it! HTML+CSS+자바스크립트 웹 표준의 정석 7장. 텍스트를 표현하는 다양한 스타일 글꼴 관련 스타일font-family 속성 -웹 문서에서 사용하는 글꼴font-family:|[, ] 글꼴 없을 경우를 대비해, 글꼴ewhacse.tistory.com 10장. 반응형 웹과 미디어 쿼리반응형 웹 알아보기반응형 웹 디자인이란, 웹 요소를 화면 크기에 맞게 재배치하고 표시 방법만 바꾸어 사이트를 구현해 준다 뷰포트란, 스마트폰 화면에서 실제 내용이 표시되는 영역이다 CSS크기를 지정할 때, 뷰포인트를 기준으로 하는 단위를 사용할 수 있다. 크롬 브라우저의 디바이스 모드 활용하기크롬 개발자 도구의 디바이스 모..

교재: Do it! HTML+CSS+자바스크립트 웹 표준의 정석 HTML 입력과 CSS 기초 학습 정리교재: Do it! HTML+CSS+자바스크립트 웹 표준의 정석 4~6장 4장. 웹 문서에 다양한 내용 입력하기 텍스트 입력하기제목을 나타내는 태그제목n에 1~6의 숫자가 들어가며 숫자가 작을수록 텍스트 크기가ewhacse.tistory.com 7장. 텍스트를 표현하는 다양한 스타일 글꼴 관련 스타일font-family 속성 -웹 문서에서 사용하는 글꼴font-family:|[, ] 글꼴 없을 경우를 대비해, 글꼴을 2개 이상 지정하기도 한다body { font-family: "맑은 고딕", 돋움, 굴림 } *기본형 기호 | 는 나열한 옵션 중 하나가 값이 되어야 한다는 의미속성값 나열 시 값이 아..