Jeden Tag, aufrichtig und lustig.

길이 단위는 CSS 작업을 할 때 중요한 요소 중 하나이다. 유지보수와 연관되어 있기 때문이다. CSS에서 사용할 수 있는 단위는 절대 길이와 상대 길이로 분류 될 수 있다. 절대 길이 단위 : cm, mm, px 등 상대 길이 단위 : em, rem, vw, vh, % 등 절대 길이 단위 ( px 등 ) -> 절대적인 길이 그대로를 화면에 구현하고, 변동되는 값에 부여하는 경우 유지보수가 어렵다. 참고) 대부분 폰트 크기를 지정안했을 때 폰트크기의 기본 값은 16px이다 상대 길이 단위 ( em, rem, vw, vh, % 등 ) -> 가변적인 길이 단위이며 상대적으로 유지보수가 쉽다. 1. em 부모 요소의 폰트 크기가 기준이 된다. hello1 : 20px hello2 : 10px hello3 : ..

IR (Image Replacement) 기술 웹페이지상 사용자입장에서는 볼 수 없지만, 스크린리더나 브라우저를 위해 텍스트를 기재하는 방법이다. 웹접근성 향상과 SEO최적화 하는데 영향을 끼치므로 중요한 개념이다. 이전에는 웹페이지 문서 구조상 필요한 제목이지만, 화면상에는 나타날 필요가 없을 때 아래 속성을 사용했었다. visibility:hidden 하지만 공부해보니 위와 같은 속성은 스크린리더가 읽어주지 않고 무시하기 때문에 웹접근성을 감소시켜 사용해서는 안되는 속성이었다. 위 속성을 대신해서 아래와 같은 코드를 사용 할 수 있다. position: absolute; clip-path: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow..

웹페이지상에서 레이아웃을 구성할 때 사용되는 position과 display 개념에 대해 정리해보고자 한다. position position은 복잡한 레이아웃을 만들기 위해서는 사용되는 속성이다. 포지션 속성을 사용하여 요소를 원하는 위치에 지정할 수 있다. 1. relative relative는 별도의 속성을 지정하지 않는 이상 static과 동일하게 동작한다. top이나 right, bottom, left를 지정하면 기본 위치와 다르게 위치가 조정된다. 다른 콘텐츠는 해당 엘리먼트에서 남긴 공백에 맞춰 들어가게끔 조정되지 않을 것이다. 2. absolute absolute는 가장 다루기 까다로운 위치 지정 값이다. 뷰포트에 상대적으로 위치가 지정되는 게 아니라, 가장 가까운 곳에 위치한 조상 엘리먼트..

position relative position: relative; 자체로는 특별한 의미가 없다. 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있다. absolute position: absolute; 부모 태그 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다. 일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative; 를 부여하면 된다. * absolute 값을 갖게 되면, 내용의 크기만큼이 가로크기가 된다.

margin-auto .center { margin: 20px auto; } margin 속성에 auto값을 부여하면 중앙정렬을 할 수 있다. 위와 같은 코드를 적용하면center 클래스는 위 아래 20px 마진을 갖게 되고 가로로 중앙 정렬 하게 된다.

layout 기본 레이아웃 사이트 제목 사이드바 본문 푸터 3단 레이아웃 html 사이트 제목 사이드바 본문 사이드바 푸터 css * { margin:0; padding:0; box-sizing: border-box; } #container{ width: 1200px; margin: 20px auto; } #header{ width: 100%; height: 120px; background-color: #acacac; } #left-sidebar{ width: 250px; height: 600px; background-color: #e9e9e9; float: left; } #contents{ width: 800px; height: 600px; background-color: #f7f7f7; float: ..

style 시트 css 코드만 따로 관리하고 싶을 때 style태그 빼고 css부분을 잘라내기 해서 별도의 파일로 만들면 ex.style.css style시트로 관리하기 편하다. =>유지보수 효율성 올라감으로써 경제적 효과도 창출한다. 링크 태그를 사용함으로써 html파일과 css파일의 연결이 가능하다. *rel :relationship * text/css : link태그로 연결되는 파일이 어떤 것인지 알려준다.

미디어 쿼리 responsive web (반응형 디자인)을 제작하는데 사용 된다. 반응형 디자인이란 화면 크기에 따라 웹페이지의 각 요소들이 반응해서 최적화된 웹페이지를 만드는 것이다. ex. 화면의 최대 크기가 800이하일 때 display를 none하고 싶은 경우, @media (max-width : 800px) { div{ display : none ; } }

grid 단락을 나란히 배치하고 싶다면 그리드를 활용 할 수 있다. 이를 위해선 부모태그로 각 단락을 묶어야 한다. 부모태그로 묶는 방법 를 활용 할 수 있다. 는 의미가 존재하지 않는 디자인을 위한 태그이다. navigation template ** css 선택자 특정하는 법 -> 부모 선택자 이름을 앞에 붙인다. ex. => 1) id가 grid값의 하위태그로 묶여있는 ol태그를 선택한다. 2) id가 grid값의 하위태그로 묶여있는 article id값을 선택한다.

*division : 분할 디자인 목적을 위해 섹션을 나눌 때 사용하는 의미없는 태그이다. class나 id 속성을 통해 css 디자인을 하는데 사용한다. 그룹핑하고 레이아웃 분리 및 가독성 향상을 위해 사용될 수 있다. ex. 헤더, 메뉴, 주요 내용, 푸터 *block level element ↕ *inline level element *태그를 사용하는 것의 적절성을 판단 할 수 있는 사이트 http://caniuse.com Can I use... Support tables for HTML5, CSS3, etc caniuse.com