WEB/HTML+CSS(Front-end) 14

CSS - CSS 코드의 재사용(부제: 스타일 태그를 HTML태그와 따로 어떻게 쓸 수 있을까?)

https://youtu.be/djBrHjeitUo HTML 안에 CSS 스타일 태그가 한 번에 들어가 있는 경우엔 너무나도 많은 수정을 동시에 해야 할 경우가 생길 것. 그런 문제를 미연에 방지하기 위해서 CSS 스타일 태그를 따로 분류해서 코딩가능하도록 한다. 링크 태그로 연결해주어서 캐싱을 줄이고 더 편리하게 코드를 작성하게 한다. 그러나 HTML안에 CSS가 들어가 있는 것 자체가 효율적이라곤 한다. 하지만 캐쉬등의 문제로 나눠서 쓰는 것이 합리적이다. 여기까지가 생활코딩 HTML + CSS의 끝. 모두 한 회씩을 보고 왔으면 한다.

CSS - 반응형 디자인

https://youtu.be/aA4xunvDWU8 반응형 디자인이란? 간단하게 말해서 웹상에서의 크기가 줄고 늘고 또 뭐 특별한 상황에 따라서 웹이 반응하는 것을 의미한다. 예를 들어 800px 보다 화면이 커질 경우엔 화면이 어떻게 보여진다 이런 식 https://youtu.be/qe3nSIg2k3Y 미디어 쿼리를 이용한 반응형 디자인 만들기. 검사를 켜놓고 옆에서 코드를 짜면 참 쉽고 편리할듯 하다.

HTML+CSS - 웹페이지 폰트 적용하기

웹-폰트란? 다른 사용자의 컴퓨터에 웹디자이너가 사용한 글꼴이 없어도 보여지도록 구현 한 것을 의미한다. [ 1. 웹 폰트 사용하기 ] https://fonts.google.com/earlyaccess Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 구글에서 제공하는 웹 폰트를 사용하는 방법이 있다. https://m.blog.naver.com/onsway/221547112192 [HTML] 웹 폰트 사용하기 웹 폰트(web-font) 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자... blog.naver.com 친절하게 사용방법을 알..

CSS - CSS의 속성 알아내기 (부제: 속성을 알아내서 우리가 스스로 웹페이지를 꾸며보자)

효과에 대한 중요한 토대를 닦는 작업 우리누리의 축제정보 우리누리 축제정보 소개 검색 캘린더 캘린더 . saw active로 class로 묶은 경우 띄어쓰기로 나눠서 여러개의 클래스의 묶음으로 사용가능하고 하나의 테그에는 여러개의 속성이 들어올 수 있고 여러개의 선택자를 통해서 하나의 테그를 공동으로 제어할 수 있다. => 별로 좋은 방법이 아님. 위의 코드에는 없지만 .saw .active 클래스가 각각 색을 서로 줬을 때 나중에 입력된 클래스의 값을 반영하기 때문에 매우 좋지 않아서 ID 선택자를 사용하는 것을 추천 ID선택자 vs class 선택자 vs 테그 선택자 id > class > tag 이유는? id 선택자의 경우엔 같은 이름의 id는 한 번만 사용할 수 있기 때문에 개발자들은 포괄적인 테..

CSS - CSS의 기본문법(부제: CSS의 기본적 문법과 CSS 적용 방법을 알아보자)

우리누리의 축제정보 우리누리 축제정보 소개 검색 캘린더 Fetival CSS를 사용하는 기본적인 방법 1. style 테그를 통해서 우리가 CSS를 사용하고 있음을 알려주는 방법 2. 속성을 이용하는 방법 우리누리의 축제정보 우리누리 축제정보 소개 검색 캘린더 Fetival 그렇다면 우리는 왜 HTML의 속성을 이용해서 디자인을 넣는 것일까? = CSS는 한 번에 모든 디자인을 넣어주기 때문에 개별적으로 디자인을 적용시키고 싶을 경우가 있기 때문에 이러한 경우에 속성을 이용해서 디자인을 적용시켜준다. 우리누리의 축제정보 우리누리 축제정보 소개 검색 캘린더 Fetival 1. 스타일 테그를 쓴다. 2. 스타일 속성을 쓴다. = CSS를 적용시킬 두 가지의 방법 우리누리의 축제정보 우리누리 축제정보 소개 검..

CSS - CSS의 시작 (부제: HTML과 CSS의 사용 차이법을 알아보자)

font 테그 추가로 진행 = CSS의 등장 이전 상황 -> 만약 100억개의 테그를 수정해야 하는 일이 있다면? 매우 곤란해짐 -> 그래서 다음 챕터에서 CSS를 이용한 수 많은 불편함을 해결하는 방법이 등장함 web에 대한 정보는 HTML의 테그와 속성이 담고 있다. 그렇다면 CSS는 무엇을 의미할까? CSS 자체는 web에 대한 정보는 전혀 가지고 있지 않으며 디자인을 나타내고 있다. 우리누리의 축제정보 우리누리 축제정보 소개 검색 캘린더 Fetival 주석처리를 한 것들이 똑같은 디자인을 나타낼 수 있게 한 것이다 위의 주석은 CSS를 통해 디자인을 넣은 코드이고 아래의 주석은 HTML 테그인 font 테그를 이용해서 디자인을 넣은 코드이다.

HTML - 문서의 구조 (부제: 태그의 슈퍼스타들을 알아보자)

웹브라우저로 열었을 때 글짜가 깨지는 경우 해결법 : UTF - 8로 작성된 파일을 UTF - 8로 열도록 바꿔준다. HTML의 태그는 본문과 본문을 설명해주는 것들로 나뉜다. 본문은 로 묶는다. 본문을 설명해주는 태그는 검색 캘린더 소개 우리누리 html의 기본적인 구조를 살펴보았다. HTML의 주석은 로 처리하면 된다. 본문의 내용을 설명해주는 태그들 본문을 설명하는 태그들

HTML - 부모자식과 목록 (부제: 목차를 만들며 부모자식 관계를 알아보자)

목차를 만들기에 앞서 목차를 list 태그로 만들어 준다. 여러 분류별 목차가 겹치지 않게 구분하기 위해선 li태그의 부모태그로 구분을 해준다. 이런식으로 진행을 해준다. 또한 부모태그는 자식태그를 꼭 가지고 있고 자식 태그는 부모태그를 꼭 가지고 있다 Ordered List Unordered List 이러한 경우는 2대 태그의 경우엔 3대가 같이 다닌다.