[프론트엔드] CSS

728x90

CSS
@ CSS 란? : 웹 UI & UX 부분 : 사용법 자체는 그리 어렵지 않으나, 프로젝트 규모가 커질수록 레이아웃이 깨지거나 및 충돌일어남 : 관심사분리를 위해 일반적으로 HTML에서 CSS를 정의하지 않음 ( 연습용 샌드박스 : 링크 ) @ HTML에 적용하는 방법 1) link 태그 안에서 href 속성을 사용해 파일 연결 ex) <link rel="stylesheet" href="index.css"/> 2) rel은 일반적으로 stylesheet로 고정	// 단위 1) 절대단위 : px, pt 등 2) 상대단위 : %, em, rem, ch, vw, vh 등 참고링크 : 숫자, 길이, 확률, w3school링크 3) px(픽셀) : 기기나 브라우저 사이즈 등 환경에 영향 받지 않는 절대적인 크기 4) rem : root의 글자크기. 브라우저 기본은 1rem. 일반적으로 사용함 5) em : 엘리먼트에 따라 상대적으로 크기변경됨.
@ 옵션 1. 글자색 : color 2. 글씨체 : font-family 이탤릭체 등 : font-style 3. 텍스트정렬 : text-align // left, right, center, justify(양쪽정렬) 4. 글자크기 : font-size 5. 배경색 : background-color 6. 글자굵기 : font-weight 7. 밑줄, 가로줄 : text-decoration 8. 자간 : letter-space 9. 행간 : line-height	1. <p style="color:blue">폰트색상</p> 2. <p style="font-family:courier">폰트스타일</p> 3. <p style="text-align: "center">가운데정렬</p> 4. <p style="fint-size:50px">폰트사이즈</p> 5. <body style="background-color:색상값">
@ CSS를 적용하는 스타일 1. 인라인스타일 : 같은 줄에서 스타일 적용 2. 내부 스타일시트 : 별도의 파일을 추가하지 않고, style태그 내 작성 3. 외부 스타일시트 : 별도의 CSS 파일로 구분하여 작성

#id 와 .class
ID	Class
#	.
한 문서에서 한 번만 적용할 곳에만 사용(고유값)	동일한 요소를 여러군데 적용할때 사용(반복값)
특정 요소에 이름 붙일때 주로 사용	스타일의 분류에 사용

id 와 class 적용 방법
id 방법 1. HTML 파일 : <h4 id="id명">내용</h4> 2. CSS 파일 : #id명 { 옵션: 값; }	class 방법 : 주로 리스트 등에 사용 1. HTML 파일 : <h4 class="class명">내용 2. CSS 파일 : .class명 { 옵션: 값; } 3. 여러개의 class를 하나의 태그에 적용하는 법 : 띄어쓰기로 구분 : <li class="class1 class2">Home</li>

박스모델

@ 웹에서 박스 확인 방법 : F12 / Ctrl + Shift + i / Cmd + Opt + i(MacOS) => 개발자 도구의 Elements 탭 1) block 요소의 목록은 MDN block 엘리먼트 목록 2) inline 요소의 목록은 inline 엘리먼트 목록 * inline 박스는 width, height 속성이 적용안됨 * 줄바꿈이 되는 태그: <h1> <p> 줄바꿈이 되지 않는 태그: <span> = 콘텐츠만큼이라	@ 박스 사이즈 설정 : 시계방향 (상우하좌) 순서로 지정 ex) margin: 10px 20px 30px 40px;면, 각각 상, 우, 하, 좌 순 : 세개 쓰면, 상 좌우 하 @ 박스를 벗어나는 콘텐츠 처리 : overflow : auto; 설정 : 넘치는부분은 스크롤로 대체함 : overflow-x, overflow-y로 방향 지정 가능 : overflow-hidden은 넘치는 부분 안보여주는 기능 ex) p { height: 40px; overflow: auto; }
@ 박스 크기 측정 기준 : 박스 크기는 여백을 포함한 사이즈로 계산해야함 --------------------------------------------------------------------------------- ex) #container { width: 300px; padding: 10px; background-color: yellow; border: 2px solid red; } 일때, 박스사이즈 = 324px = 300px (콘텐츠 영역) + 10px (padding-left) + 10px (padding-right) + 2px (border-left) + 2px (border-right) --------------------------------------------------------------------------------- #inner { width: 100%; height: 200px; border: 2px solid green; background-color: lightgreen; padding: 30px; } 일때, 박스사이즈 = 364px = 300px(300px의 100%) + 30px (padding-left) + 30px (padding-right) + 2px (border-left) + 2px (border-right)
@ 레이아웃 디자인을 조금 더 쉽게하는 방법 : 모든 요소 선택( * ) => box-size 속성 추가 => border-box 값 추가 : 여백과 테두리 두께를 포함한 박스 계산법 : * 은 모든 요소를 선택하는 셀렉터 ex) * { box-sizing: border-box; }

index.css 기본 작성

body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #4a4a4a;
}
header,
footer {
  font-size: large;
  text-align: center;
  padding: 0.3em 0;
  background-color: #4a4a4a;
  color: #f9f9f9;
}
nav {
  background: #eee;
}
main {
  background: #f9f9f9;
}
aside {
  background: #eee;
}

728x90

저작자표시 비영리 변경금지 (새창열림)

'Java & Spring > 옵션정리' 카테고리의 다른 글

[백엔드] 리눅스(Linux) 기초 3 - 권한부여 (chmod rwx) (0)	2022.06.30
[백엔드] 리눅스(Linux) 기초 2 - 패키지/패키지 매니저 (0)	2022.06.30
[백엔드] 리눅스(Linux) 기초 1 - 기본 사용법/단축키/nano (0)	2022.06.30
Kakao Oven 단축키 (Wire frame) (0)	2022.06.28
[생활코딩] Java : 기초 학습중 (0)	2022.06.20

'Java & Spring > 옵션정리' 카테고리의 다른 글

티스토리툴바