HTML&CSS20 CSS: display (block, inline, inline-block, none) display속성은 html을 짤 때 아주 중요하다. 네개가 있지만, 실제로 사용하면 display속성을 정확히 알고 있어야 이쁘게 잘 쓸 수 있다. .contentBox { display: none; // 안보이게 display: inline; // 글자의 기본 display 속성 display: block; // width,height를 갖게하고 싶을때 display: inline-block; // 내용만큼만 영역을 갖되, block속성을 갖고 싶을때 } 1. none과 block css에서 on또는 active클래스가 추가되면 안보이다가 보이게, none -> block 을 이용한다. 2. block과 inline-block block을 쓰는건 다음컨텐츠를 밑으로 떨어트릴때 많이 사용한다. bloc.. 2020. 6. 30. CSS: 글자 관련 css속성(line-height, text-indent, letter-spacing) - line-height 글자에는 폰트마다 위아래로 여백이 있는데, 정확한 퍼블리싱을 위해서는 위아래 여백을 없애주고 작업을 한다. 또 글자의 세로 가운데를 맞출때, line-height를 이용해서 가운데로 오게할 수 있다. .jelly ul li { height: 50px; line-height: 50px; /* 글자를 세로 가운데 정렬할때 사용 */ } .jelly ul li a { line-height: 1; /* 글자 상하 여백 초기화 */ } - text-indent 들여쓰기, 화면상에 보여질 필요가 없는 글자에 text-indent를 통해 가리기도 한다. .jelly_bg a { text-indent: -9999em; } - letter-spacing 글자 간격 .brown p { letter.. 2020. 6. 24. CSS: padding, margin, box-sizing padding : 안쪽에 생기는 여백 margin : 바깥쪽에 생기는 여백 작성할 때는 아래와 같이 작성할 수 있다. .box { padding: 0 20px 5px 4px; /* 위 오 아 왼 */ padding-right: 30px; margin: 5px 20px; /* 상하 좌우 */ margin-top: 20px; } css에서는 box-sizing: border-box 라는 중요한 속성이 있다. width, height를 잡고나서, padding을 주게 되면 기본적으로 (width+padding) 을 해서 총 width가 늘어나게 된다. 이때 box-sizing: border-box를 주게 되면, width를 유지하면서 안쪽에서 padding을 잡게 된다. 이것과 마찬가지로 페이지를 만들때 간혹.. 2020. 6. 20. CSS: 반응형 웹페이지 적용하기 반응형 웹페이지를 만들때는, 기본적으로 3단계로 만든다. PC, 태블릿, 모바일 버전으로 만들게 되는데, CSS는 index.css / tablet.css / mobile.css 각각 파일을 만들어 주고, 기본html인 index.html의 head에 버전별로 적용해준다. 또한 반응협웹을 코딩할 때는 모바일버전까지 고려해서 구조파악을 먼저 해야한다. 혹은 css파일마다 직접 이렇게 작성할 수 있다. @media (max-width: 768px) { ... ... ... } @media (max-width: 480px) { ... ... ... } 메인은 index.css 이며, 태블릿/모바일 버전에서 변경되는 부분만 따로 css를 작성해 주면 된다. 2020. 6. 19. 이전 1 2 3 4 5 다음
