본문 바로가기

Mark Up/CSS14

[CSS] Chapter 14. CSS Position(relative, absolute) 한 방에 정리 CSS Position position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다. 사용법은 간단하다. 기준을 잡는다. (예- position: relative;) 이동시킨다. (예- top: 50px;) 알아두기 block : 한 줄 모두 차지 (대표 element - , ) inline : 콘텐츠 크기 만큼만 차지 (대표 element - ) Position 속성 요소를 옮기려면 일단 위치를 옮길 기준점을 잡는다. static 기준 없음 (배치 불가능 / 기본값) relative 요소 자기 자신을 기준으로 배치 absolute 부모(조상) 요소를 기준으로 배치 fixed 뷰포트 기준으로 배치 stick.. 2023. 4. 18.
[CSS] Chapter 13. 브라우저 크기마다 CSS가 바뀌는 Media Query .box { width: 100%; height: 100px; border: 4px solid red; } @media screen and (max-width: 1260px) { .box { width: 90%; background-color: red; } } // 테블릿 화면 @media screen and (max-width: 768px) { .box { width: 80%; background-color: blue; } } // 모바일 브라우저 @media screen and (max-width: 576px) { .box { background-color: greend; } } media query는 css 맨 마지막에 사용된다. 왜 그러느냐? css는 맨 마지막에 있는 것들이 적용되기 때문에. 2023. 1. 7.
[CSS] Chapter 12. Position(static, relative, absolute, fixed, sticky), z-index, overflow position 요소를 어떻게 배치할지 결정하는 CSS 속성 우선 Normal Flow 개념을 이해하는 것이 중요함 Normal Flow란? 요소의 레이아웃을 전혀 제어하지 않았을 때, 브라우저에서 기본적으로 요소가 배치되는 흐름 Remind) 인라인 요소, 블록 레벨 요소 등 특성에 따라 기본적으로 요소가 배치되는 방식이 있음 즉 요소의 특성에 따라 Normal Flow가 정해져 있는 것 코드에 작성된 순서에 맞게 차곡차곡 HTML 요소가 표시된다. positon 속성을 통해 Normal Flow에서 벗어나, 개발자가 원하는 대로 제어하여 배치할 수 있음 position 속성은 top, bottom, left, right 속성과 함께 사용함 position의 종류에 따라 top, bottom, left.. 2023. 1. 6.
[CSS] Chapter 11. 레이아웃 만들기 - grid 3. grid .container { width: 400px; height: 600px; border: 1px solid black; } .top { background: red; width: 400px; height: 200px; } .left { background: blue; width: 200px; height: 200px; } .right { background: green; width: 200px; height: 200px; } .bottom { background: purple; width: 400px; height: 200px; } grid로 정렬하는 방법은 제일 최신에 나온 방법이다. grid 같은 경우는 공간을 이미 다 격자로 나누어놓은 다음에 그 격자에 해당하는 것만큼 채워주는 방식으.. 2022. 12. 29.
[CSS] Chapter 10. 레이아웃 만들기 - float 2. float 정렬 .container { width: 400px; height: 600px; border: 1px solid black; } .top { background: red; width: 400px; height: 200px; } .left { background: blue; width: 200px; height: 200px; } .right { background: green; width: 200px; height: 200px; } .bottom { background: purple; width: 400px; height: 200px; } float 속성이 있는데 이것은 레이아웃 배치를 위해서 만들어진 속성이다. html의 모든 태그들은 float이 디폴트로 none으로 부여되어 있다. 정.. 2022. 12. 29.
[CSS] Chapter 09. 레이아웃 만들기 - display_inline 2번째 파랑색 div 블럭과 3번째 초록색 div 블럭을 어떻게 한 라인에 배치를 할 수 있을까? 크게 4가지 방법을 통해 알아보겠다. 1. 많이 사용하지 않은 귀찮은 방법 .container { width: 400px; height: 600px; border: 1px solid black; } .top { background: red; width: 400px; height: 200px; } .left { background: blue; width: 200px; height: 200px; } .right { background: green; width: 200px; height: 200px; } .bottom { background: purple; width: 400px; height: 200px; } .. 2022. 12. 29.
[CSS] Chapter 08. CSS 레이아웃 부모태그의 css는 자식도 영향을 받는다 - inherit Loerm // 빨간색 글씨로 나온다. 버튼 // 태그마다 상속이 안되는 경우도 있어서, 버튼 태그는 직접 설정해야한다. .parent { width: 200px; height: 200px; border: 1px solid red; } .child { width: 70%; height: 70%; background-color: blue; } // 두 class가 div 태그라고 가정했을 때, child 태그는 parent 태그의 크기 70%에 해당하는 크기를 가진다. px, em, rem 일반적으로 16px = 1em = 1rem이다 .px { font-size: 16px; } .em { font-size: 1em; } .rem { font-si.. 2022. 12. 26.
[CSS] Chapter 07. 시멘틱 태그와 스타일링 시멘틱에 관한 설명글 : https://song-ift.tistory.com/8 https://song-ift.tistory.com/50 하나를 에로 들면 : 단순히 글자만 굵게 : 문서에서 중요한 단어 두 태그는 보이기에 렌더링상으로 똑같이 보인다. 시멘틱 태그는 적절한 상황에 의미를 부여해서 쓰는것이지, 단순 웹의 스타일링을 위해 사용하면 안된다. 검색포털에서 html을 읽는데 도움이 될 수 있고, 스크린리더에 탐색할 때 용이하다. 시멘틱 태그는 종류도 많거니와 외울 수 없다 자주 사용하는 시멘틱 태그 : 위 첨자 : 아래 첨자 : 약자 2022. 12. 26.
[CSS] Chapter 06. class와 id 속성 ID 값은 단 하나 1 2 id의 값 같은 경우는 문서에 고유, 유니크하게 단 하나만 존재하는 것이 개발자들끼리의 약속이다. 설령 적용된 id값의 요소가 중복으로 존재하더라도 브라우저상에서는 아무런 에러없이 렌더링 될 것이다. 하지만 개발자들끼리 id값은 고유한 값으로 사용하자는 약속이고, 관습이다. var x = document.getElementById("heading"); // 어짜피 id를 선택하는 것이기 때문에, 단 하나만 선택된다. var xx = document.getElementsByClassName("title"); // class는 여러번 중복되도 되기 때문에, 여러개의 태그가 할당된다. 웹 프로그래밍에서 html, css, javascript까지 세 개는 떼놓지 못할정도로 많은 연관을.. 2022. 12. 23.
[CSS] Chapter 05. 선택자(Selector)_3 1. 주요 선택자 - Type, Class, ID 2. 속성 선택자 - [attr], [attr=value] 3. 속성 선택자 -[attr^], [attr$], [attr_] 4. 가상클래스 선택자 - first-child, last-child, nth-child 5. 가상클래스 선택자 - first-of-type, last-of-type, nth-of-type 6. 가상클래스 선택자 - not 7. 가상클래스 선택자 - link, visited 8. 가상클래스 선택자 - hover, active, focus 9. 가상클래스 선택자 - enabled, disabled, checked 10. 가상요소 선택자 - before, after 11. 가상요소 선택자 - first-letter, first-line.. 2022. 11. 26.

티스토리툴바