내 책상 서랍 위 내 책상 서랍 위

학습/CSS

• CSS 선택자(Selector) 종류

  학습/CSS 2022. 3. 22. 16:15

  id class tag a > b(자손) a b(후손) 링크선택자 :link, :visited 반응선택자 :hover, :active 그룹선택자 - 선택자, 선택자 ::after, ::before 상태선택자 :checked 구조선택자 동위선택자 속성선택자 에서 type이 속성 에서 href / title이 속성

  Read More
• CSS 접두사(Vender Prefix)

  학습/CSS 2022. 3. 21. 14:32

  접두사는 웹 브라우저 공급업체에서 제공하며, 최신 브라우저가 아닌 사용자를 위해서 CSS 서식이 원활히 안나올 것을 대비해 붙여주는 것입니다. -ms- 마이크로소프트 익스플로러 -webkit- 구글 크롬 -mox- 파이어폭스 -webkit- 사파리 -o-오페라

  Read More
• CSS 미디어 쿼리(Media Query)

  학습/CSS 2022. 3. 6. 15:59

  미디어 쿼리는 디바이스의 화면 크기마다 각각 다르게 css를 적용하는 기술입니다. 반응형 웹을 제작하기 위한 필수적인 방법으로 기본 문법은 이렇습니다. css 외부 서식은 디바이스의 성격에 맞게 파일명을 저장하면 구별하기가 더 쉽습니다. ex) pc.css _ tablet.css _ mobile.css

  Read More
• CSS 포지션(position) 속성

  학습/CSS 2022. 3. 4. 14:00

  Position은 문서 내에서 위치를 설정해주는 속성입니다. {Position의 종류} static : 기본값. relative : 요소의 본래 위치에서 상대적으로 배치. absolute : 절대배치(포함 블록의 네 변 기준). 브라우저의 왼쪽 상단 꼭지점에서 시작. fixed : 브라우저 스크린 기준으로 배치 inherit : 부모의 속성값을 상속 받음. (요샌 잘 쓰지 않는) 1️⃣ static 가장 기본적인 정적 위치로 top, bottom, left, right의 영향을 받지 않습니다. 2️⃣ relative 상대 위치로 기준을 잡아줄때 주로 쓰입니다. 부모에 relative를 걸어주고 자식에게 absolute를 걸어서 위치 조정. 3️⃣ absolute 절대 위치로 relative가 걸린 요소를..

  Read More
• CSS 가운데(중앙) 정렬

  학습/CSS 2022. 3. 3. 19:41

  가운데 정렬을 할 때 자주쓰는 공식을 하나 소개하려고 합니다. 1️⃣ 기준이 되는 영역에 position:relative를 준 뒤 2️⃣ 가운데로 오게 하고 싶은 영역에 position:absolute 후 나머지 소스를 써주면 됩니다.

  Read More
• CSS 초기화(reset.css)

  학습/CSS 2022. 3. 2. 14:45

  브라우저에 기본적으로 생기는 여백이나 ul, li태그 앞에 생기는 목록 점이나 하이퍼링크 걸린 글자에 밑줄이나 텍스트의 기본 파란색 컬러를 초기화 시켜주는 문서입니다. 1️⃣ 이 사이트에서 reset 문서를 다운 받은 후 https://cssdeck.com/blog/ 2️⃣ 웹 편집기에서 title 밑에 문서를 연결 해주면 완료입니다.

  Read More
• CSS 자손, 후손 선택자

  학습/CSS 2022. 3. 1. 23:28

  1️⃣ id 2️⃣ class 3️⃣ tag 4️⃣ a > b(자손) 5️⃣ a b(후손) 6️⃣ :link, :visited 7️⃣ :hover, :active 8️⃣a, b, c, d(그룹선택자)

  Read More
• CSS 기초

  학습/CSS 2022. 2. 28. 14:46

  1️⃣ CSS (Cascading Sytle Sheets의 약자) - 폰트 종류와 크기, 여백, 글자색, 배경색, 정렬 등을 지정하는데 사용합니다. - 애니메이션이나 레이아웃을 짜는데 쓰기도 합니다. 2️⃣ CSS의 특징 일관성 유지 및 작업시간 단축 (서식 한꺼번에 변경) 수정 및 관리 용이 적은 용량과 이해하기 쉬운 구조 테이블 코딩에 비해 50%정도 코드 절약 다른 사용자 환경에서도 동일한 형태의 문서 (웹표준에 맞는) 1966년에 첫 발표 후 현재 CSS3까지 나옴 사이에 을 넣고 스타일 안에 표기 class 선택자는 원하는 곳 여러군데 반복해서 사용 가능 id 선택자는 중복 안됨 tag 선택자는 따로 설정해주지 않아도 바로 적용가능 font-family에서 대체글꼴 3가지 정도 넣음 css 주석..

  Read More