웹 프로그래밍(HTML, CSS)

HTML 구조, Basic CSS

Posted by iheese on January 26, 2022 · 7 mins read

HTML 구조

HTML 구조

  • 레이아웃을 구성할 때 그 의미에 맞는 태그를 이용해야 가독성이 좋은 코드를 만들 수 있다.
  • CSS를 구현하기 전 HTML로 문서의 구조를 잡아나가는 것이 유리하다.


id와 class

  • 태그 안에 고유한 속성을 주는 방법
  • 코드의 가독성이 좋아지며 css 선언할 때 큰 도움이 된다.

id

  • 고유한 속성으로 HTML 문서에 하나만 사용 가능하다.
  • 고유한 값이기 때문에 특별한 제어 가능, 검색에도 용이하다.

class

  • 하나의 HTML 문서 안에서 중복해서 사용 가능하다.
  • 하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수 있다.


CSS

style을 HTML에 적용하는 방법

1.inline

<p style="border:10px solid gray; color:green; font-size:5em;">
  • 태그 안에 직접 style을 지정하는 방식
  • 다른 CSS 파일에 적용한 것 보다 가장 먼저 적용된다.

2.internal

<head>
<style>
p  {
  font-size : 10em;
  border:10px solid gray;
  color: green;
}
</style>
</head>

<body>
<div>...</div>
</body>
  • style 태그로 지정하는 방식, head 태그 부분에 보통 style 태그 삽입
  • 구조와 스타일이 섞여 유지보수가 어렵다.
  • 별도의 CSS 파일 관리하지 않아도 되며 CSS 파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없다.

3.external

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

  • 외부에 css 파일 만들어서 href로 연결해주는 방식 rel은 연결문서와의 관계를 말해준다.

  • inline은 우선순위를 가지며, internal과 external은 우선순위가 동등하다.
  • 겹치는 선언이 있으면 나중에 선언된 속성이 반영된다.


Cascading(캐스캐이딩)

<div id="a" class="b">
	text....
</div>

#a{
 color : red;  /*id에 style 적용  #이용 */
}

.b{
 color : blue; /*class에 style 적용  .이용 */
}

div{
 color : green; /*엘리먼트에 style 적용*/
}
  • 우선순위: id > class > ELEMNET(엘리먼트)


CSS Selector

  • id는 #idname{}, class는 .classname{}, 엘레멘트는 element{}
  • 그룹 선택은 h1, span, div#id{} 처럼 할 수 있다.
  • 요소 선택 
    <div id="hi">
 <div>
   <span> span tag </span>
 </div>
 <span> span tag 2 </span>
</div>

    #hi span{color: red;} 
/*div 안의 모든 span 요소가 빨간색 */

    #hi > sapn{color: red; }
/*div 바로 아래 자식 요소인 spans tag2 만 빨간색이 됨*/
  • n번쨰 자식 요소 선택 
    <div id="hi">
	<h2>단락 선택</h2>
 	<p>첫번째 단락입니다</p>
 	<p>두번째 단락입니다</p>
 	<p>세번째 단락입니다</p>
 	<p>네번째 단락입니다</p>
</div>

    #hi > p:nth-child(2) { color : red }
/*위처럼 하면 첫번째 단락이 빨간색이 된다. hi class에서 p 자식 중에 선택 하려해도 앞의 형제 요소를 고려하여 숫자를 넣어야 한다.  */
#jisu > p:nth-child(1) { color : red }
/*아무 것도 빨간색으로 변하지 않는다. */
#hi :nth-child(1) { color : red }
/*위처럼 하면 단락 선택이 빨간색이 된다. */


CSS layout

display
  • block:
    • 한 줄에 나열하지 않고 화면에 그 자체로 한 줄을 완전히 차지한다.
    • <p>, <div>, <h1> 대표적인 block 태그이다.
    • width, height, margin, padding 속성이 모두 반영된다.
  • inline:
    • 전후 줄바꿈 없이 한 줄에 나란히 배치된다.
    • <span>, <a>, <em>이 대표적인 inline 태그이다.
    • width, height 속성은 지정해도 무시된다.
    • margin, padding 속성은 좌우 간격만 반영되고 상하 간격은 반영되지 않는다.
  • inline-block:
    • inline 처럼 한 줄에 배치되지만 width, height, margin, padding 을 지정해줄 수 있다는 점이 다르다.
    • <button>, <input>, <select> 태그가 있다.
    • 한 줄에 여러 엘리멘트를 정확한 너비만큼 배치할 수 있다.
  • flex: 레이아웃 배치 전용 기능으로 고안된 레이아웃
    • flex는 부모 요소인 Flex Container, 자식 요소인 Flex Item로 구성된다.
    • flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물 너비 만큼만 차지하게 된다. 높이는 컨테이너 높이만큼 늘어난다.
    • flex-direction: row; (기본값), column;, row-reverse;, column-reverse; 설정도 가능하다.

클릭! 시각적으로 확인

positon
  • static
    • 기본 속성, 순서대로(위에서 아래로, 좌에서 우로) 배치된다.
  • relative
    • 자기 자신을 기준으로 top, right, bottom, left 의 오프셋값을 적용한다.
  • absolute
    • static이 아닌 상위 엘리먼트의 position을 기준으로 top, right, bottom, left 의 오프셋값을 적용한다.
  • fixed
    • 전체화면(viewport)의 좌측, 맨 위를 기준으로 동작한다.

클릭! 시각적으로 확인

float
  • 한 요소가 보통 흐름에서 빠져 텍스트 및 인라인 요소가 그 주위를 감싸는 특별한 형태로 배치된다.
  • right, left, none(초기값)

클릭! 시각적으로 확인


padding, border, margin

padding, border, margin

  • padding: content의 바로 밖의 요소 내부 빈공간
    • padding: 10px; : 위, 오른쪽, 바닥, 왼쪽 모두 10px
    • padding: 10px 5px; : 위, 바닥 10px, 오른쪽, 왼쪽 5px
    • padding: 10px 5px 7px; : 위 10px, 오른쪽, 왼쪽 5px, 바닥 7px
    • padding: 10px 5px 7px 3px; : 위 10px, 오른쪽 5px, 바닥 7px, 왼쪽 3px
  • border: 요소의 테두리
    • border: 너비 스타일 색; 순으로 축약형으로 사용 가능
  • margin: 요소 주위의 빈 공간


Reference:

← Previous Post Next Post →