본문 바로가기

프론트엔드 개발

[CSS] 포지셔닝 1. position (1) 정의 요소들이 화면에 어떻게 배치될 것인지 지정하는 속성 이 속성은 자식 요소에게 대물림되지 않는다. (font-size: 2em 이 되어있으면 자식 요소들의 폰트 크기는 대를 거듭할수록 복리로 커졌었다.) ** top, bottom,left,right : 기준점에서 얼마 만큼 떨어졌는가를 나타낸다. (top = 25px 기준 점에서 25px 만큼 내려갔다. bottom = 30px 기준 점에서 30px 올라갔다. left = 80px 기준 점에서 80px 만큼 오른쪽으로 갔다. right = 40px 기준 점에서 45px 만큼 왼쪽으로 갔다. ) (2) 속성 ㄱ. static 기본값, 전적으로 페이지 흐름을 따른다. top, bottom, left,right,z-index .. 더보기
[CSS] 배경 꾸미기 1. 이미지를 배경에 사용하기 (1) 배경에 이미지 넣기 background-image: url(이미지의 상대 or 절대 주소); (2) 배경 이미지 반복 background-repeat: repeat; /*속성 (default는 repeat) no-repeat, repeat-x, repeat-y, space(이미지들이 띄엄띄엄 반복) round(반복되는 이미지가 짤리지 않고, 이쁘게 반복되도록, 이미지 찌그러지지 않는 선에서 크기 변화해서 반복) 속성 2개 반복해서 쓸 수 있음 그러면 첫 번째 속성은 가로에만 적용, 두 번째 속성은 세로에만 적용 */ (3) 배경 이미지 위치 background-position: top; /*위치 2개 반복 가능(top left -> 좌상단), center는 중앙 퍼센.. 더보기
[CSS] 박스 모델 2 1. border block 요소의 테두리를 뜻함. /* border: 굵기 선모양 색깔 ex- boder: 2px solid black border: 1.5vmin dotted darkorange*/ /*border-top, bottom,left,right 각각 하나씩 설정도 가능.*/ 2. box-sizing box-sizing: content-box; /*box의 너비는 border와 padding 값을 뺀 순수 글의 너비로 설정되고, border와 padding 값은 그 위에 얹어 진다. ex) width: 440px이면, 글의 너비가 440px가 되고, border와 padding 값은 440px이라는 박스 크기에 +alpha가 된다.*/ box-sizing: border-box; /*box의 .. 더보기
[CSS] 박스모델 1 1. inline이 아닌 요소 (block, in-line block)의 크기에 적용할 수 있는 것 (1) 너비, 높이 ㄱ. 절대적인 수치 이용 (px) ㄴ. 부모 요소의 크기에 대한 상대적인 요소 이용(em, %) ㄷ. 윈도우 창 전체 크기에 대한 상대적인 요소(이를 뷰포트라고 함) 이용 (Xvw- 윈도우 창 너비의 X%, Xvh - 윈도우 창 높이에 대한 X%) ㄹ. 윈도우 창 너비와 높이 중 큰 것/ 작은 것에대한 상대적인 요소 (Xvmax - 둘 중 큰 것의 X%, Xvmin - 둘 중 작은 것에 대한 X%) ㅁ. max-width, min-width / max-height, min-height 설정해두면 block이나 inline-block이 해당 너비나 높이 이상으로 커지거나 작아지지 않음. .. 더보기
[HTML] Block 요소와 In-line 요소 1. in-line, block, inline-block 요소 특징 (1) in-line과 block의 차이 Block은 딱딱한 상자와 같다. 상자처럼 공간을 독차지하고 높이,너비, 안팤의 여백의 효과 다 적용됨. in-line은 랩으로 물건을 씌운 것과 같다. 껍데기가 없기 때문에 다른 컨텐츠들과 어우러진다. (2) block과 in-line block 의 차이 in-line block은 컨텐츠 크기 만큼의 커스터마이징된 박스이다. block이 하나의 가로 공간 전체를 독차지 하는 것과 달리, in-line block은 택배회사 공장 라인에 박스를 나란히 늘여뜨려 놓듯이 가로 공간을 공유 해서 쓸 수 있다. (3) 표 in-line block inline-block 기본 너비 컨텐츠 크기에 맞춤 부모의.. 더보기
[CSS] 색 표현하기 1.색 표현의 원리 (1) 색 이름으로 표현 p { /* 글자색 */ color: yellow; /* 배경색 */ background-color: black; } (2) RGB(A)로 표현 *형태 rgb(빨강,초록,파랑) rgba(빨강,초록,파랑,불투명도) * 각각 0~255이고, 전부 255 하면 흰색, 전부 0하면 검정색 (%로 쓸 수도 있다.) 불투명도는 값이 낮을수록 투명, 높을수록 불투명. *rgb()만 하고 인풋 4개 넣어서 불투명도 표현도 가능하다. p { /* 글자색 */ color: rgba(100,50,20%,50%); /* 배경색 */ background-color: rgb(200, 150, 300); } (3)HEX로 표현 RGB랑 똑같은데, 위의 10진수를 16진수로 표현한 것 #.. 더보기
[CSS] 문단과 목록 스타일 만들기 1. 정렬과 간격(자간, 스페이스 크기, 줄 높이) p { /* left, center, right, justify */ text-align: left; letter-spacing: 0; word-spacing: 0; line-height: 1.5em; /* justify는 채워 쓰기 (글의 양쪽 끝을 맞춘다.) 스페이스바 간격은 em이나 %등 상대적인 걸로 하는 것이 좋다 왜냐하면, 간격을 상대적 크기로 해야 폰트나 글자 크기에 맞게 간격이 띄워지기 때문이다. 들여쓰기도 마찬가지 */ } 2. 들여쓰기 p { text-indent: 0.8em; } /* 들여쓰기도 마찬가지로 얼마나 들여쓰는 지를 글자 폰트 자체의 띄어쓰기 비율에 맞추는 것이 좋기 때문에, em이나 %같은 상대적 비율로 쓰느 것이 좋다... 더보기
[HTML] 글자 텍스트와 스타일 1. CSS 기본 문법 선택자 { 속성1: 값; 속성2: 값; /* ... */ } 2. 폰트 스타일(기울이기) + 폰트 굵기 p { /* normal, italic, oblique */ font-style: normal; /* normal, bold, 100~900 */ font-weight: normal; } /*p 태그에 대해서 해당 폰트 기울기, 굵기가 적용된다.*/ 3. 요소마다 글자 크기 키우기 (일괄 키우기, 상대 비율로 키우기(복리 o,x)) (1) 일괄 커짐 (px : 픽셀) 선택자 { font-size: ~~px; } /*해당 선택자 영역 내의 모든 글자는 ~~px만큼 크기가 커짐.*/ (2) 갈수록 비율 만큼 커짐 (100%, 1em) 선택자 { font-size: ##; } 선택자 .. 더보기

티스토리툴바