공부하는 히욤이

[부스트코스] 웹 프로그래밍 기초 : CSS - FE 본문

boostcourse/웹 프로그래밍

[부스트코스] 웹 프로그래밍 기초 : CSS - FE

히욤이 2019. 8. 3. 22:29

1) CSS 선언방법

CSS의 구성

span {
  color : red;
  }

 

  • span : selecor ( 선택자 ) 
  • color : property
  • red : value

style을 HTML 페이지에 적용하는 3가지 방법

 1. inline

    - HTML 태그 안에다가 적용

    - 다른 CSS 파일에 적용한 것 보다 가장 먼저 적용

<p style="border:1px solid gray;color:red;font-size:2em;">​

 2. internal

    - style 태그로 지정

    - 구조와 스타일이 섞이게 되므로 유지보수가 어렵다

    - 별도의 css파일 관리를 하지 않아도 됨

<head>
<style>
p  {
  font-size : 2em;
  border:1px solid gray;
  color: red;
}
</style>
</head>

<body>
<div>...</div>
</body>

 3. external

    - 외부파일(.css)로 지정하는 방식

    -코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋음

<html>
	<head>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div>
			<p>
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</p>
		</div>
	</body>
</html>

4. 우선순위

    - inline은 별도의 우선순위를 갖지만, internal 과 external은 우선순위가 동등함

    - 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영

 

 

2) 상속과 우선순위 결정

CSS 상속

  • 상위에서 적용한 스타일은 하위에도 반영
  • id는 클래스 보다 우선되고 클래스는 엘리먼트보다 우선 됨

선언 방식에 따른 차이

  • 같은 선택자라면 나중에 선언한 것이 반영
  • 선택자의 표현이 구체적인 것이 있다면 먼저 적요 됨

ID > CLASS > ELEMENT순으로 반영

 

3) CSS Selector

Css Selector

  • HTML의 요소를 tag, id , html 태그 속성 등을 통해 쉽게 찾아주는 방법

element에 style 지정을 위한 3가지 기본 선택자

  • tag로 지정
<style>
     span {
       color : red;
     }
 </style>
  • id로 지정
<style>
     #spantag {
       color : red;
     }
</style>

<body>
     <span id="spantag"> HELLO World! </span>
</body>
  • class로 지정
<style>
     .spanClass {
     color : red
     }
</style>

<body>
     <span class="spanClass"> HELLO World! </span>
</body>

 

CSS Selector의 다양한 활용

  • id, class 요소 선택자와 함께 활용
#myid { color : red }
div.myclassname { color : red }
  • 그룹 선택
h1, span, div { color : red }
h1, span, div#id { color : red }
h1.span, div.classname { color : red }
  • 요소 선택(공백) : 자손 요소

 

4) CSS 기본 Style 변경하기

font 색상 변경

  • color : red;
  • color : rgba(255, 0, 0, 0.5);
  • color : #ff0000; //16진수 표기법

font 사이즈 변경

  • font-size : 16px;
  • font soze : 1em;

배경색

  • background-color : #ff0;
  • background-image, position,repeat 등의 속성
  • background : #0000ff url(".../gif") no-repeat center top;

글씨체/글꼴

  • font-family : "Gulim";
  • font-family : monospace;

웹폰트

  • 브라우저에서 기본으로 지원하지 않는 폰트를 웹으로부터 다운로드 받아 사용할 수 있는 방법

 

5) Element가 배치되는 방법(CSS layout)

엘리먼트가 배치되는 방식

display(block, inline, inline-block)
position(static, absolute, relative, fixed)
float(left, right)

엘리먼트가 배치되는 방식 - (display : block)

  • display속성이 block이거나 inline-block인 경우 그 엘리먼트는 벽돌을 쌓든 블록을 가지고 쌓임
<div>block1</div>
<p>block2</p>
<div>block3</div>

엘리먼트가 배치되는 방식 - (display : inline)

  • display속성이 inline인 경우는 우측으로, 아래쪽으로 빈자리를 차지하며 흐름
  • 높이와 넓이를 지정해도 반영되지 않음
<div>
  <span>나는 어떻게 배치되나요?</span>
  <span>좌우로 배치되는군요</span>
  <a>링크는요?</a>
  <strong>링크도 강조도 모두 좌우로 흐르는군요</strong>
  모두다 display속성이 inline인 엘리먼트이기 때문입니다.
</div>

 

 

엘리먼트가 배치되는 방식 (position:static, relative, absolute)

  • position 속성을 사용하면 상대적/절대적으로 어떤 위치에 엘리먼트를 배치하는 것이 수월

1. position 속성으로 특별한 배치를 할 수 있음

  • position 속성은 기본 static
  • 순서대로 배치

2. absolute는 기준점에 따라서 특별한 위치에 위치

  • top / left / right / bottom 으로 설정
  • 기준점을 상위엘리먼트로 단계적으로 찾아가는데 position이 기준점

3. relative는 원래 자신이 위치해야 할 곳을 기준으로 이동

  • top / left / right / bottom로 설정

4 fixed는 viewport(전체화면) 좌측, 맨 위를 기준으로 동작

 

엘리먼트가 배치되는 방식 (margin:10px)

  • margin으로 배치가 달라질 수 있음
  • margin은 위 / 아래 / 좌 / 우 엘리먼트와 본인 간의 간격
  • 그 간격만큼 내 위치가 달라짐

엘리먼트가 배치되는 방식 (float:left)

  • float 속성으로 원래 flow에서 벗어날 수 있고 떠다닐 수 있음
  • 일반적인 배치에 따라서 배치된 상태에서 float는 벗어난 형태로 특별히 배치됨
  • 따라서 뒤에 block엘리먼트가 float 된 엘리먼트를 의식하지 못하고 중첩돼서 배치됨
  • float의 속성은 이런 특이성 때문에 웹사이트의 전체 레이아웃 배치에서 유용하게 활용됨

엘리먼트가 배치되는 방식 (box-model)

  • 블록 엘리먼트의 경우 box의 크기와 간격에 관한 속성으로 배치를 추가 결정
  • margin, padding, border, outline으로 생성됨
  • box-shadow 속성도 box-model에 포함지어 설명할 수 있음
  • box-shadow는 border 밖에 테두리를 그릴 수 있는 속성

엘리먼트의 크기

  • block엘리먼트의 크기는 기본적으로는 부모의 크기만큼을 가짐
  • 예를 들어, width:100%는 부모의 크기만큼을 다 갖는 것과 같음

box-sizing과 padding

  • padding 속성을 늘리면 엘리먼트의 크기가 달라질 수 있음
  • box-sizing 속성으로 이를 컨트롤 할 수 있음
  • box-sizing 속성을 border-box로 설정하면 엘리먼트의 크기를 고정하면서 padding 값만 늘릴 수 있음

layout 구현방법

  • 전체 레이아웃은 float를 잘 사용해서 2단, 3단 컬럼 배치를 구현
  • 최근에는 css-grid나 flex 속성 등 layout을 위한 속성을 사용하기 시작
  • 특별한 위치에 배치하기 위해서는 position absolute를 사용하고, 기준점을 relative로 설정
  • 네비게이션과 같은 엘리먼트는 block 엘리먼트를 inline-block으로 변경해서 가로로 배치
  • 엘리먼트안의 텍스트의 간격과 다른 엘리먼트간의 간격은 padding과 margin 속성을 잘 활용해서 위치시킴

6) float 기반 샘플 화면 레이아웃 구성

float 기반 샘플 화면 레이아웃 구성

  • 기본 배치 후 필요한 부분을 float를 사용해서 좌우 배치하는 것이 일반 적
  • 비율 조정은 %를 사용해서 배치 할 수도 있음

 

7) 디버깅-HTML-CSS

디버깅-HTML-CSS

  • CSS Style을 inline 방식으로 빠르게 테스트 가능

  • 현재 엘리먼트 값을 임시로 바꿀 수 있음
  • 최종 결정된 CSS 값을 확인 할 수 있음

 

<해당 포스트는 교육 목적을 위해 '부스트코스'의 강의를 듣고 강의자료를 개인적으로 정리한 것으로 모든 내용의 출처와 저작권은 부스트코스에 있습니다.>

저작자표시 비영리 동일조건

'boostcourse > 웹 프로그래밍' 카테고리의 다른 글

[부스트코스] 웹 프로그래밍 DB 연결 웹 앱 : JavaScript - FE  (0) 2019.08.04
[부스트코스] 웹 프로그래밍 : Servlet - BE  (0) 2019.08.03
[부스트코스] 웹 프로그래밍 기초 : HTML - FE  (0) 2019.07.28
[부스트코스] Web개발의 이해 - FE/BE  (0) 2019.07.23
'boostcourse/웹 프로그래밍' Related Articles more