본문 바로가기
  • Coding & Book

WEB/CSS311

06-03. CSS Reset CSS Reset이란? 브라우저 스타일을 여러 브라우저에서 정규화 하기 위해 쓰는 것이다. 헤딩 글꼴 같이 크기가 다른것들을 깨끗한 상태로 만들어주는것이다. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var.. 2023. 1. 5.
06-02. 미디어 쿼리 1. 미디어 쿼리란? 미디어 쿼리는 반응형 웹사이트 스타일을 수정하는 방법이다. 예를 들어 모바일이랑 웹의 화면 크기가 다르니 메뉴등을 보여주거나 숨기고 없앨수 있도록 도와주는 것이다. 미디어쿼리를 사용 하는 방법은 @media로 시작하며 괄호 안에 미디어 기능을 넣을 수 있다. 예시1) 최소 min, 최대 max 사용 Home Learn More About Contact Sing Up Media Queries body { font-family: 'Open Sans', sans-serif; } h1 { font-size:6em; text-align: center; } nav { font-size:1.5em; } ul,li { display: inline; margin:0; padding:0; } /*최소.. 2023. 1. 4.
06-01. Flexbox 1. Flexbox란? 페이지의 콘텐츠 상자 안에 아이템을 배치할때 사용하는것이다. 컨테이너를 만들고 그안에서 배분을 하는것. 예시 FlexBox app.css 파일 body { font-family:'Open Sans', sans-serif; } h1 { text-align: center; } #container { background-color: #003311; width: 90%; height: 500px; margin: 0 auto; border: 5px solid #003311; } #container div { width: 200px; height:200px; } 출력내용 이지만 Flexbox를 이용시 안에 넣을 수 있다. #container { background-color: #003311;.. 2023. 1. 4.
05-02. css 전환 transition: 으로 애니매이션 효과를 적용 할 수 있다. 예시로 가로 세로 200px 인 네모 상자 위에 커서를 둘경우 3초에 걸쳐 동그라미로 변하게 되고 커서를 내릴경우에 다시 네모로 변하게 된다. 추가로 알면 좋은 것들 transition-timing-function: linear 일정한 속도로 변화한다. transition-timing-function: ease-in 천천히 시작하다 빨라지며 변화한다 transition-timing-function: steps(6,end) 6단계에 걸쳐 변한다. transition-timing-function: cubic-bezier 앞뒤로 움직이는것처럼 변한다. 관련사이트! https://easings.net/ Easing Functions Cheat Sh.. 2022. 12. 30.
05-01. css3 테두리와 투명도 border-width: 1px; 여기서 px 단위로 많이 사용 하는 이유는 얇고 웬만해선 규격이 바뀌지 않아 많이 사용한다고 한다. box-sizing: border-box 좌우의 테두리로 요소의 크기가 결정된다. (내부공간이 줄어든다.) opacity: 0.6(범위) 투명도와 불투명도 범위는 0~1이며 1에 가까울 수록 불투명해진다. 만약에 배경만 투명하게 할려면 background-color: rgba(255.255.255.0.2) 형식처럼 쓰면 되고 내부에 있는 글처럼 모두를 투명하게 할경우 back-ground: blue; 를 쓴후 아래에 opacity:0.2 로 쓰면 된다. 2022. 12. 26.
04-01. 레이아웃 1.수평정렬 레이아웃 ①자손에게 float 속성을 부모에겐 overflow: hidden 키워드를 사용한다. width 속성과 height 속성을 입력 안해도 overflow 속성이 자손이 차지하는 너비를 모두 감싸는 특징이 있다. 오늘의 메뉴 메뉴 - 1 메뉴 - 2 메뉴 - 3 메뉴 - 4 30%할인 ② clear:both 속성을 사용해 수평정렬을 할 수 있다. 오늘의 메뉴 메뉴 - 1 메뉴 - 2 메뉴 - 3 메뉴 - 4 30%할인 2.중앙 정렬 레이아웃 ①중앙 정렬하고 싶은 태그에 width 속성을 부여 한후 margin 속성을 0 auto 로 입력한다. 치킨 치킨(영어: chicken)으로 불리기도 하는 한국의 닭튀김은 토막낸 닭고기에 튀김옷 또는 반죽물을 덮어 기름에 튀겨 만든 음식이다. "치.. 2022. 12. 19.

티스토리툴바