UI/UX 웹퍼블리셔 과정 1일차

* HTML 기본 태그

1. 블럭요소

[종류]

<p>, <div>, <ul>, <ol>, <li> 등

[특징]

• 전체 너비를 차지한다.
• 블럭요소와 인라인 요소 전체를 감쌀 수 있다.
• 너비값을 지정하지 않으며 브라우저 전체를 차지한다.

2. 인라인요소

[종류]

<a>, <span>, <img>,<em>,<strong>,<i> 등

[특징]

• 너비, 높이값에 영향을 받지 않는다.
• 너비에 영향을 받지 않기 때문에 연속적으로 붙음
• 인라인 태그는 인라인 태그만 감쌀 수 있다.

* CSS 기본 속성값

[폰트]

div {
	font-weigtht: bold;   /* 폰트 굵기 */
	font-size: 10px;   /* 폰트 사이즈 */
	line-height: 1.5;   /*행간(배수,픽셀 등 단위 설정가능) */
	color:red;   /* 폰트 색상(16진수로도 색상값 적용가능) */
	text-align:right    /* 문단정렬(center,left 등 쓸 수 있음)*/
	
	}

더 많겠지만 가장 많이 쓰는 폰트 속성이고 축약해서 사용할 수 있다.

div {
	font:bold 10px/1.5 "굴림";    /* 굵기 크기 행간 폰트스타일 순으로 */
}

 

 

[배경]

div {
	background-color:red;      /* 배경색(16진수 색상값적용가능) */
	background-repeat: repeat;      /* 배경이미지를 반복여부(no-repeat,repeat-x 등) */
	background-image: url(../img/img.png);       /* 배경이미지 경로 입력 */
	backgroud-postion: 50px 100px;      /* 배경위치(center,right 등으로 입력가능) */
}

 

이것도 축약해서 가능하다.

div {
	background: red url(../img/img.png) repeat 50px 100px;   
	/* 배경색 배경이미지 반복여부 위치 순으로 */
}

 

 

[간단한 리셋 CSS]

common.css 파일로 많이 접할 수 있지만 common 파일은 당장 우리 수준에서 사용하기에 불필요한 내용들이 많기 때문에 아래의 내용으로 간략하게만 사용해도 좋다고 한다. 

* {
	margin: 0;
	padding: 0;
}

a {
	outline:0;
	text-decoration:none;
}

ul, li, ol {
list-style:none;

}

 

 

첫수업은 대부분 아는 내용이었지만 복습할 수 있어서 좋았다. 다만 온라인이라는게 좀 아쉽지만, 선생님이 최대한 참여할 수 있게 이끌어주셔서 시간이 금방갔다. 기초 부분은 진짜 많이 접해서 쉽다고 여겨지는데 또 보면 새롭게 느껴지는건 왜일깤ㅋㅋㅋ 빨리 빨리 배워서 취업하고 싶다. 

아무튼 막상 정리하려고 하니 여간 귀찮아서 아마 오래 못할거 같은 느낌이네 ㅠㅠ

**과제 2개 제출하기!