css11 [WEB/CSS] CSS 단위 | 미디어쿼리 저번에 웹 홈페이지만들면서 반응형 웹에 대한 정리의 필요성을 느꼈는데,이번에 CSS 미디어쿼리를 정리하는 김에 덧붙여 정리해보려고한다 . CSS 단위 절대적 단위상대적 단위pxemcmremmmvw vh % px: 가장 흔하게 사용했던 px은 container 크기가 변경돼도 그대로 고정된 값으로 유지되어, 반응하지않는다.vw: 화면 넓이를 기준으로 백분율 단위 (1vw = 뷰포트너비의 1%) -> 만약 화면이 800px 라면, 1vw=8px 이다.vh: 화면 넓이를 기준으로 하는 백분율 단위, (1vh= 뷰포트 높이의 1%)vmin: 브라우저의 너비와 높이 중 작은 값의 1%vmax: 브라우저의 너비와 높이 중 큰 값의 1%em: 부모요소(루트요소) font-size를 기준으로 하는 사이즈rem: 최상.. 2024. 8. 2. 미디어 쿼리와 그리드 적용 1. 미디어 쿼리 - 접속하는 미디어의 타입/ 특징 / 해상도에 따라 다른 스타일 속성을 적용하는 기술 · 기본 문법 @media and () (){ /*css 코드; */ } - not / only ㄴ not 뒤에 오는 모든 조건 부정. ㄴ only 미디어 쿼리를 지원하는 기기에서만 해석하라. -mediatype ㄴ 생략 가능함. (생략시 all 로 인식함.) ㄴ 생략하지 않으면 반드시 다음에 and 연산자가 와야한다. all 모든 기기 print 인쇄 장치(ex. 프린터기) screen 컴퓨터 화면 or 스마트 기기 speech 웹페이지를 소리 내어 읽어주는 장치(ex. 스크린 리더기) -media feature ㄴ 적용될 미디어의 조건을 적음. min-width 미디어 쿼리가 적용될 최소 너.. 2024. 1. 7. 이미지 그리드 / CSS Grid 1) css grid 2) emmet -emmet 을 처음 사용해봤다. 저렇게 입력해주면 다음과 같은 코드가 10개 생성된다! (item 2는 추가적으로 적은 것.) 3) 클래스 분류에서 image 와 image1은 분리해서도 클래스로 사용 가능함 4) 외부 스타일 시트 사용에 익숙해지자! css 파일과 html 분리 ! 5) 그리드 생성과 column / row ㄴ item2 의 크기를 특정해서 지정해보기. ㄴ column 과 row 의 start 값과 end 값을 한 번에도 표기 가능하다. 6) 오늘의 결과물 ! ㄴhover 속성도 넣어봤다. *hover 값도 넣고 text , a href 속성도 넣어서 하나 더 만들어봐야겠다. 🧐 2024. 1. 7. 레이아웃 설계(1차원/ flexbox layout ) 1차원 레이아웃: flexible box layout 속성으로 설계함. 2차원 레이아웃: grid layout 속성으로 설계함. 1.1차원 레이아웃 설계 (flexible box layout) 1.1. 플렉스 박스 레이아웃이란 -main axis : 수평한 축 -cross axis : 수직한 축 -flex container : display 속성값으로 flex or inline-flex 가 적용된 요소 -flex item: 플렉스 컨테이너와 자식관계를 이루는 태그 구성요소 1.2. 기본 속성 ★display속성 ㄴdisplay: flex; /*inline-flex*/ flex 다음 요소가 줄 바꿈 됨 inline-flex 다음 요소가 주변에 배치 됨 -플렉스 아이쳄이 수직.. 2024. 1. 7. 나무위키 목차 만들기 css 배우기 전에 html 만으로 만들었던 나무위키 목록표에 css를 적용시켜봤다. https://blog.naver.com/smoothbutterfresh/223134426826 #코딩기록4_[html] 나무위키st 목록표 만들어보기 나무위키에 들어가면 보기쉽게 작성된 목록표를 구현해보고자 도전 ..! (아직 HTML만 배운 상태로 하는... blog.naver.com 짠 ,, 나무위키st 목차에 css를 적용시켜봤다. ★ - a 태그에 기본으로 적용되어있던 (링크 사용 시) 밑줄을 제거함. ㄴtext-decoration-line: underline; 링크가 연결된 파란글씨를 클릭하면 해당 본문의 부분으로 연결된다. 사용된 CSS 코드들 HTML 코드들 목차 개요 특징 및 인터페이스.. 2024. 1. 7. 웹 로그인 창에 css 적용시켜보기 이전에 html 만 배웠을 때 로그인 창의 html 틀까지만 만들었었다. https://blog.naver.com/smoothbutterfresh/223134437711 #코딩기록5_[html] html로 만들어본 로그인 창 ! 웹 사이트에 로그인 할 때 우리가 자주 마주하는 로그인 창을 지금까지 익힌 html로 만들어보기 도저어언! ... blog.naver.com 로그인 창의 뼈대였다... 이제 이 html에 지금까지 배운 css속성들을 적용시켜봤다! css를 적용시키니 이제 조금 작동은 하게 생겼다.(?) 이렇게 아이디와 비밀번호를 치고 로그인하도록 만들었다. 제일 위에 구글 연동 로그인 버튼을 누르면 구글 로그인 창으로 넘어가도록 이미지에 a href 속성으로 실제 구글 로그인 창 링크도 .. 2024. 1. 7. 변형 효과 /transform, transform-origin 속성 1. transform 속성 transform 속성을 사용하면 요소에 특정 변형 효과를 지정할 수 있음. 속성값에는 변형 효과가 정의된 다양한 함수를 사용함. translate(x, y) 요소를 현재 위치에서 x(x축)와 y(y축) 만큼 이동함 translateX (n) 요소를 현재 위치에서 n 만큼 x축으로 이동함 translateY (n) 요소를 현재 위치에서 n만큼 y축으로 이동함 scale(x, y) 요소를 x와 y만큼 확대 또는 축소함 scaleX(n) 요소를 n만큼 x축으로 확대 또는 축소 scaleY(n) 요소를 n만큼 y축으로 확대 또는 축소 skew(xdeg, ydeg) 요소를 x축과 y축으로 기울임 skewX(deg) 요소를 deg만큼 x축 방향으로 기울임 skewY(deg) 요소를 d.. 2024. 1. 7. 애니메이션 속성 / @keyframes 과 animation 속성들 1. 애니메이션 속성 -애니메이션을 적용할 스타일 속성과 키 프레임(@ketframes)이 필요함. -키프레임 정의 틀 (0% : 시작/ 100%: 종료) @keyframes { 0%{css 코드} n%{css 코드} 100%{css 코드} } 1.1. animation-name 속성 - 특정 요소에서 적용할 키 프레임명을 지정함. -animation-name:; 1.2. animation-duration 속성 - 애니메이션을 지속할 시간을 설정함. - animation- duration:; /* 단위는 초(s)나 밀리초(ms)단위의 시간을 사용*/ 1.3. animation-delay 속성 - 애니메이션 실행을 지연할 수 있음. - animation-delay:; /* 단위는 초(.. 2024. 1. 7. 전환 효과 /transition 속성 전환(transition) : css에서 한 요소에 적용된 스타일 속성을 다른 속성값으로 시간에 따라 서서히 바뀌도록 지정하는 속성. ㄴ예를 들면 이전에 :hover 요소를 이용해서 마우스를 요소 위에 올리면 변화가 일어나는 속성도 전환에 해당된다. 1. transition-property 속성 ㄴ transition을 적용할 속성을 지정하는 속성 ㄴ 속성값에는 여러가지를 ,(쉼표)를 사용하여 (복수로)모두 적어 적용할 수 있다. ㄴ none, all 과 같이 속성값 사용도 가능하다. none 전환 효과 x all 모든 속성을 전환 효과 대상으로 지정 여러 속성 지정 ex) transition-property: background-color, color, width; 2. tra.. 2024. 1. 7. 위치 속성 / html 요소 배치하기 (position, float, clear) css의 position 속성으로 html요소를 기본 흐름에서 벗어나서 원하는 곳에 배치할 수 있다. CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정한다. 그리고 float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정한다. 1.position 속성 ( static / relative / absolute / fixed / sticky / z- index ) 2. float 속성( none / left / right ) 1.position: 속성값; 1.1. static postition값을 static으로 지정하면 아무런 변화가.. 2024. 1. 7. CSS적용방식 / 내부스타일 시트, 외부스타일 시트, 인라인스타일 드디어 CSS 시작 ! 먼저 css의 문법 기본틀은 이렇다. 선택자{속성: 값;} ex) p{color:green;} 위 안에 있는 세 개의 문단들을 각각 다른 방식을 적용해서 글자 색상을 변경해보겠다.ㅎㅎ 글자의 색을 바꾸는 문법의 종류에는 세 가지가 있다. 내부 스타일 시트/ 외부 스타일 시트/ 인라인 스타일 1. 내부 스타일 시트 - 태그를 사용, html 문서에 바로 적용함. - 태그 내에 작성함. 태그를 태그를 사용하여 내부 스타일 시트 방식으로 변경 완료. 이 밖에 내부 스타일 시트 2. 외부 스타일 시트 (*가장 많이 사용) - 외부에 있는 .css(stylesheet 파일) 문서를 연결함. -실무에서 사용, 가장 많이 사용 -안에 외부의 .css문서 파일 링크와.. 2024. 1. 7. 이전 1 다음
