일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- AWS EC2 서버 만들기
- Logback
- Linux apt-get
- arbitrum sepolia eth
- EC2 HTTP 호스팅
- 아비트럼 새폴리아 이더 받는법
- Navigation Pattern
- git 계정 설정
- GIT
- nginx https 설정
- EC2 oh my zsh
- Linux cat
- Linux rmdir
- EC2 Apache2
- EC2 zsh
- HTTP Web Server
- UNPROTECTED PRIVATE KEY FILE
- linux foreground
- Linux mkdir
- 서버의 서비스 방식
- Linux apt
- Linux 디렉터리 역할
- javascript scope
- javascript 정렬
- git 기본 에디터
- Linux 디렉터리 구조
- Linux oh my zsh
- ec2 ssh unprotected private key file
- ssl 인증서 발급받기
- linux background
- Today
- Total
목록CSS (14)
HyunJun 기술 블로그
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/c7JMbT/btskhCznsDn/eybGNd99ssRNXGgl0UkqL0/img.gif)
1. CSS position css 포지션이란 말 그대로 어떠한 기준에 맞춰 요소들을 position 할 것인지 지정하는 속성이다. 1) static CSS position의 기본값이다. static인 요소는 HTML 문서 상에서 원래 있어야 하는 위치에 배치하는 설정으로 다른 태그와의 관계에 의해 자동으로 배치된다. top, left, bottom,. right 값을 무시하게 되며, 임의의 위치 설정이 불가능하다. static static static 2) relative 요소를 원래 위치에서 벗어나 임의의 위치를 지정할 수 있게 해준다. 요소를 기존의 원래 위치(static 일 때의 위치)를 기준으로 상대적(relative)으로 배치한다. static relative static relative 3)..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Rioy7/btskiSafxgx/5u6gCCcNZRMH9uJEQpmNmk/img.png)
1. overflow overflow 속성은 어떠한 요소 내의 컨텐츠가 너무 커서 요소 내에 모두 보여주기 힘들 때 어떻게 보여줄 것인지를 지정한다. 기본적으로는 컨텐츠를 포함하고 있는 요소의 크기가 고정되어 있지 않다면 컨텐츠가 커지면 컨텐츠를 포함하고 있는 요소의 크기도 커지게 된다. 컨텐츠의 크기가 고정되어 있을 때 overflow에 지정된 값에 따라 보이게 된다. 예를 들어 아래와 같이 div 안에 긴 문장이 있다면 div는 컨텐츠의 크기에 따라 커진다. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde, aliquid sit quibusdam tenetur voluptatibus assumenda vel culpa praesentiu..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/0aQX5/btskiyvVPNf/2EQj0sMltA6weoYRYWE9R1/img.png)
1. CSS Text 관련 속성 CSS에는 텍스트의 모양을 변경하거나 효과를 주기 위한 다양한 속성이 존재한다. 1) color, size, weight color: 글자의 색상을 지정할 수 있다. font-size: 글자의 크기를 지정할 수 있다. 16px 등으로 사용 가능하며 rem은 반응형에서 많이 쓰이며 html의 font-size를 비율로 가지고 온다. 1일 경우 html의 font-size와 동일 2일 경우 2배이다. font-weight: 글자의 굵기를 지정할 수 있다. /* 글자 색상 */ color: crimson; font-size: 2rem; font-weight: 900; /* 글자 굵기, 최대값 900, 100 단위*/ 2) 새로운 font 적용. 새로운 font를 적용할 수 있다..
1. 절대 길이 1) px 1픽셀(화소)은 1dot을 의미한다. pixel은 해상도에 따라 상대적인 크기를 갖는다. 2) inch 인치는 물리적인 측정값이지만, CSS에서는 결국 pixel로 변환된다. 1in == 96px 2. 상대 길이 % 보통 부모의 길이를 기준으로 0% ~ 100%까지 설정 가능하다. 1) 글꼴 상대 길이 em 부모의 font-size를 기준으로 한다. 부모의 font-size가 16px일 때 자식 엘리먼트에게 1em을 설정할 경우 16px로 적용된다. rem 최상위 엘리먼트()의 font-size를 기준으로 한다. html의 font-size가 32px이고 하위 div의 font-size가 2rem으로 설정했을 때 출력되는 크기는 64px이다. 반응형에서 많이 사용한다. 2) V..
1. CSS 색상 코드 표현하기. 1-1. 색상 이름 색상 자체의 이름으로 사용 가능하다. 1-2. 16진수 표현 #을 사용하여 16진수로 나타낼 수 있다. #뒤의 16진수를 2개씩 3개로 나누어 각각 red, green, blue를 뜻한다. 10 진수: 0 ~ 9, 10 ~ 19, .... 16 진수: 0 ~ 9 10 = a, 11 = b, ..., 15 = f 16 진수 10은 10진수로 16 16 진수 15는 10진수로 21 1-3. rgb, rgba rgb(), rgba() 함수를 통해 사용할 수 있다. red, green, blue 각각의 값이 0 ~ 255 값을 가질 수 있다. 빛의 세기를 뜻한다. rgba()의 경우 투명도까지 설정할 수 있다. 투명도는 0 ~ 1(소수점 가능)으로 설정 가능..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/c2DFjF/btskeMOhs2x/nS2cCA6sqqvzpaYE1E4XO0/img.png)
1. CSS Box Model CSS Box Model은 HTML 요소의 디자인과 레이아웃을 말할 때 사용한다. content .box-model { width: 200px; height: 200px; background-color: aqua; margin: 10px 20px 30px 40px; padding: 40px 30px 20px 10px; border: 1px solid black; /* border: 2px dashed red; */ /* border: 3px dotted blue; */ /* border: 4px double green; */ } content(파란색 영역): Text 등 Content가 들어가는 영역 padding(초록색 영역): border(외곽선)를 기준으로 내부 여백 ..