본문 바로가기

Frontend

 (27)
10. 상속되는 CSS 속성들 fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. 상속되는 CSS 속성들로는 모두 글자/문자 관련 속성들입니다. 그렇다고 모든 글자와 문자 속성은 아닙니다!! 대표적으로 상속되는 속성들로는1. font-style : 글자 기울기2. font-weight : 글자 두께3. font-size : 글자 크기4. line-height : 줄 높이5. font-family : 폰트(서체)6. color : 글자 색상7. text-align : 정렬등이 있습니다. 하지만 상속이 안되는 CSS 속성들을 강제로도 상속 시킬 수 있습니다. fast campus의 강의를 보며 예제를 따라해보았습니다. HTML CSS .parent { width: 300px;..
9. CSS 문법 정리 fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. CSS의 선언 방식 1. 내장 방식 → 의 내용으로 스타일을 작성하는 방식 2. 링크 방식 →요소의 style속성에 직접 스타일을 작성하는 방식 3. 인라인 방식 → 로 외부 CSS문서를 가져와서 연결하는 방식 4. @import 방식 → CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS문서를 가져와 연결하는 방식 CSS 선택자 1. 기본선택자 전체 선택자(Universal Selector) - * → 모든 요소를 선택 태그 선택자(Type Selector) - ABC → 태그 이름이 ABC인 요소 선택 클래스 선택자(Class Selector) - .ABC → HTML c..
8-2 HTML 문법 정리하기 - 핵심요소 fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. : 문서의 HTML버전을 지정. 웹브라우저가 어떤 HTML버전의 해석방식으로 페이지를 이해하면 되는지를 알려주는 용도 : HTML문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할 : 문서의 정보를 나타내는 범위. 웹 브라우저가 해석해야할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은, 웹페이지의 보이지 않는 정보를 작성하는 범위 문서의 구조를 나타내는 범위. 사용자 화면을 통해 보여지는 로고, 헤도, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은, 웹페이지의 보여지는 구조를 작성하는 범위 오늘의 날씨 : 블록요소로 특별한 의미가 없는 구분을 위한 요소. (Div..
8-1 HTML 문법 정리하기 - 태그 fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. ● 태그 자 이제 HTML의 기본적인 문법에 대해 이야기 해보도록 할게요. 첫번째는 '태그' 입니다. 앞서 HTML은 웹 사이트의 골격을 잡아주는 역할은 한다고 했는데요. 모두가 다 아는 내용일테지만 웹 페이지의 내부에 내용을 집어넣기 위해서는 태그와 태그사이에 내용을 집어넣어 줘야합니다. 앞의 태그를 시작 태그, 뒤의 태그를 종료 태그라고 합니다. 태그 안에는 다시 태그가 들어갈 수 있는데 그때는 태그 안에 있는 태그 묶음을 자식 요소, 밖의 태그들은 부모요소라고 구분 지을 수 있습니다. 태그 안에 2개의 태그가 더 있다면 바로 상위, 하위에 있는 태그는 부모요소, 자식요소로 볼 수 있지만..
7. 브라우저 스타일 초기화 하기 브라우저 별로 적용되어 있는 CSS들이 있는데 동일하게 초기화 시켜주기 위해서는 별도로 해주어야 합니다. 셋팅을 해주기 위해서는 우선 구글에 reset.css cdn 을 입력해주세요. 상위 2개 링크 아무거나 상관 없습니다!! 저는 첫번째 링크에 접속해 초기화 해주도록 할게요~ 첫번째 링크를 클릭하면 위와 같은 화면을 볼 수 있습니다. reset.css가 원본 파일이지만 외부에서 파일을 가져와 사용하는 플러그인, 라이브러리 등을 직접 수정할 상황은 매우 드물기에 굳이 원본을 사용할 필요는 없어요. 따라서 reset.min.css 파일을 가져오도록 할게요. Copy HTML 버튼을 눌러 복사해주세요. 그리고 html파일로 들어와 Head 태그 부분에 붙여 넣기 해주면 초기화가 완료됩니다.
6. 웹에서 페이지 구성 후 테스트 해보기(codepen.io) https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 수정한 코드를 한번 테스트 해보고 싶을 때 위 사이트에서 작업이 가능합니다. 사이트에 접속하면 위와 같은 화면을 볼 수 있는데 좌측 상단의 Start Coding 버튼을 눌러서 자신의 코드들을 테스트 해볼 수 있습니다. 위의 사이트에서는 Doctype, head 태그 등을 입력할 필요 없이 body 태그 안의 내용들만 입력을 하여 코드들을 테..
5. 상대 경로와 절대 경로
4. 정보를 의미하는 태그<head></head> fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. VS Code에서 빠르게 html 구조를 만들기 위해서는 ! 입력 후 tab을 눌러줌으로써 빠르게 구조를 만들 수 있습니다. 이 태그들 중에서 정보를 담는 부분은 바로 부분입니다. 내에 들어가는 태그는 크게 5가지. meta 태그, title 태그, link 태그, script 태그, style 태그 등이 있습니다. Title 태그 HTML 문서의 제목(title)을 정의 웹 브라우저 탭에 표시됨 Link 태그 rel 속성 : 가져올 문서와의 관계 href 속성 : 가져올 문서의 경로 ./ 이란 : 현재 해당하는 html 파일 주변에 존재하는 파일을 의미 Style 태그 스타일(CSS)를 H..

티스토리툴바