본문 바로가기

전체 글

 (109)
11. CSS 선택자의 우선순위 fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. 선택자의 우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할 지 결정하는 방법입니다. 따라서 점수가 높은 선언이 우선시 되어야하고, 점수가 같으면, 가장 마지막에 해석된 선언이 우선시 됩니다. 그럼 예제를 한번 봐보겠습니다. 과연 Hello world에 해당하는 글자색은 무엇일까요? 선택자 별로 점수를 부여해보겠습니다. !important(중요도) : 99999999999점 - 거의 쓰지 않음 인라인 선언 : 1000점 ID 선택자 : 100점 Class 선택자 : 10점 태그 선택자 : 1점 전체선택자 : 0점 상속 : 점수 X 1번에 해당하는 점..
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-2 HTML 문법 정리하기 - 글자와 상자 fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. 웹사이트를 만드는데 중요한 부분을 차지하는 글자와 상자는 요소가 화면에 출력되는 특성을 말하며 글자에 해당하는 인라인요소와 상자에 해당하는 블록요소가 있습니다. ▶ 인라인 요소 대표적인 인라인 요소인 span Hello World Hello World →→→→→→→ 요소가 수평적으로 쌓임 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도 글자요소인 span은 줄바꿈을 할때 자동으로 띄어쓰기가 들어가는 특성이 있습니다. 하지만 줄바꿈이 없다면 띄어쓰기가 없이 HelloWorld가 출력됩니다. 글자요소는 포함한 콘텐츠 크기만큼 가로세로가 자동으로 줄어드는 특성이 있습니다. img ..
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 태그 안의 내용들만 입력을 하여 코드들을 테..

티스토리툴바