html에 css와 별도 css파일의 효율성
지금까지의 강의 영상을 보고 진행하면서 코딩하였던 css 언어를 2.html을 메인으로 index.html, 1.html ~ 4.html까지 모두 적용하여 각 페이지가 링크를 통해 전환되면서도 통일화될 수 있도록 수정했다. 그런데 만약 이 페이지가 하나, 두 페이지가 아닌 여러 페이지로 구성되어 있다면, 작업의 수요는 모든 페이지가 해당 될 것이다. 그래서 하는 작업이 css를 html에 코딩하는 것이 아닌 별도의 css파일을 운영하는 것이다. 그리고 각 페이지에 css를 를 통해서 적용시키면 중복을 최소화하면서 간편하게 css 수정을 통해 모든 페이지에 동일한 수정 요소를 줄 수 있다. /* css폴더 내에 파일 이름이 style인 css파일 */ 이러한 작업은 파일의 중복을 제거해주는, 보다 효율적이..
ocean floor/css floor / 2021. 3. 4. / dankthedust
반응형 웹과 mediaquery
반응형 웹이란 다양한 화면의 크기 속에서 반응하여 보다 시각적, 디자인적으로 사용자에게 편안하게 정보를 보여주는데에서 필요로 한다. 점점 다양해지는 미디어(스마트폰, 태블릿, etc.)에서 매우 중요하다. 즉, 화면의 크기에 맞추어 웹 페이지의 각 요소들이 반응하여 최적화되는 것을 반응형 웹이라고 한다. 간단한 예문을 통해서 미디어 쿼리를 살펴보면 html은 안에 Responsive를 입력하고 border에 효과를 주어 시각적으로 바로 확인할 수 있도록 했다. 이후 700px을 기준으로 코딩한 가 보이게, 또는 보이지 않게 코딩했다. 위의 주석과 같이 700px을 기준으로 이상일때에 해당 가 display:none; 이 되는 것을 확인할 수 있다. 즉, min-width: 00px의 의미는 화면의 크기가..
ocean floor/css floor / 2021. 3. 4. / dankthedust
<div>를 통한 기본 Grid
html 언어인 태그에 대해서 배움에도 카테고리를 css에 분류한 이유는 태그는 다른 각각 고유의 의미를 가지는 태그(ex. , , , etc.) 등 사용시에 어떠한 효과를 보유하고 있지 않다. DIVISION(분할)의 줄임말인 태그는 css 요소를 활용하여 Grid를 적용하기 위한 태그라고 볼 수 있다. 태그는 Block Level Element로 화면 한 줄의 전체 영역을 가지고 있기 때문에 선언 시에 다음과 같이 줄바꿈이 되는 것을 확인할 수 있다. 앞 전 글에서 말했 듯, 위 아래로 구분을 짓는 것이 아닌 콘텐츠를 다음과 같이 좌우로 배치할 것이기 때문에 자식 를 감싸고 있는 부모 를 선언하고 명확한 영역을 시각적으로 확인하기 위해 css를 통해서 border를 적용한다. 이때 display: g..
ocean floor/css floor / 2021. 3. 3. / dankthedust
CSS Box Model
생활코딩에서 다음과 같이 앞 전 HTML 강의에서 작성하였던 페이지들을 다음과 같은 레이아웃에 따라 배치하고자 한다. 그전에 앞 서, Box Model에 대한 이해를 확실히 짚고 넘어가는 것이 좋다. 2.html 페이지, 그 중 태그와 태그에 적용을 하여 Box Model에 대해서 알아 보았다. 다음과 같이 의 CSS에 border에 5px, red 컬러에 solid를 주었고 태그에도 같은 css 속성을 넣어 Box 영역에 대해서 시각적으로 확인하였다. 과 같은 제목 태그는 block level element로 해당 영역의 전체를 보유하고 태그는 inline element로 자신이 가진 크기만큼의 영역을 기본값으로 가지는 태그이다. 다음과 같은 영역을 css에서 변경해주기 위해서 display라는 효과를..
ocean floor/css floor / 2021. 3. 1. / dankthedust
CSS class와 id
class와 id는 특정 HTML 요소에 대한 영향을 줄 수 있도록 지정하는 선택자(Selector)다. class는 둘 이상의 클래스를 선언이 가능하며 CSS 구문으로 .class(클래스 이름) { css(css 속성) declarations(효과); } 로 class 이름 앞에 . 을 붙여 스타일을 지정한다. 그리고 클래스 내에서는 여러개의 클래스 속성을 지정할 수 있으며 띄어쓰기로 구분한다. 다만 코딩 태그 내에서 속성은 여러개를 사용할 수 있는데, CSS 내에서 같은 class나 element에 대해서 중복된 CSS 스타일이 있다면 적용 우선순위가 있다. style { } 내에서 보다 아래에 있는 CSS 언어가 우선순위가 높다. 그 예로 다음과 같은 코딩 결과에서 그림(좌)에서는 CSS에 red ..
ocean floor/css floor / 2021. 2. 28. / dankthedust
CSS font와 text
CSS를 다루기 전에 간단히 내용을 다루어 보면, Selector(선택자), Declaration(선언자)로 나뉘어 지고 선언자 안에 Property(속성)과 속성에 대한 Value(값)으로 나뉜다. 간단히 사진을 통해 알아보면 으로 볼 수 있다. 간단하게 font에 관한 CSS문인데 먼저 font-size는 %, px, em, rem으로 크게 볼 수 있는데 %는 영역의 몇 퍼센트인지에 대한 값으로 부모 기준으로 자식의 넓이를 의미한다. px은 화면의 px단위에 따른 크기를 의미하고 모두들 이해 될 거라 생각한다. em과 rem에서 em 단위는 상위 요소 크기의 몇 배인지를 정하는데 기존 폰트 크기에 2em은 부모 폰트 크기의 2배가 적용된다. rem에서 r은 Root의 약자로 최상위의 태그에 적용된 사..
ocean floor/css floor / 2021. 2. 28. / dankthedust
