멋쟁이사자 FE7 1일차
html : HTML은 Hypertext Markup Language의 약자입니다. 웹 페이지에서 콘텐츠를 만들고 구조화하는 데 사용되는 코딩 언어.
head: 문서의 머리를 나타내는 태그. 브라우저 화면에 직접적으로 보이지 않으며, 숨은 데이터를 정의하는 태그들이 들어가게 된다.
<title>: 웹 페이지의 제목을 나타내는 태그.
body: html 문서의 모든 콘텐츠를 포함하는 영역을 정의할 때 사용.
<h> : 제목을 나타내는 태그
<p> : 문단의 약자로, 하나의 문단을 만들 때 쓰인다.
css : HTML 같은 문서의 스타일을 꾸밀때 사용하는 스타일 시트 언어
* : 모든 형태의 모든 요소를 선택한다.
class(css) : 선택자, 말 그대로 선택을 해주는 요소이다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 된다.
div : division(분할하다) 의 약자로 HTML문서 내에 한 줄의 가로(Block) 공간을 만드는 태그이다.
div를 중앙 정렬 margin-left: auto;, margin-right: auto;
box-shadow : box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성이다.
box-shadow : x축 y축 blur spread color;
x축
오른쪽과 왼쪽에 그림자 효과가 적용된다.
양수일 경우 오른쪽 그림자 적용. 예) 5px ;
음수(-) 일 경우 왼쪽 그림자 적용. 예) -5px ;
y축
위쪽과 아래쪽에 그림자 효과가 적용된다.
양수일 경우 아래쪽 적용. 예) 5px ;
음수일 경우 위쪽 적용. 예) -5px ;
blur
그림자에 번짐효과를 준다.
값이 작을수록 선명하게 보인다.
값이 클수록 더욱 흐릿하게 보인다.
예) 5px이 1px보다 더 흐릿하게 보인다.
spread
그림자의 크기를 조절해 준다.
양수면 그림자의 크기를 확장시켜 주고,
음수(-) 면 그림자의 크기를 축소시켜 준다.
color
그림자에 색을 부여한다.
번외로 color 뒤에 inset을 넣어주면
그림자가 안쪽에 생긴다.
font-family : 글꼴을 설정하는 속성
<section> : HTML 문서에 포함된 독립적인 섹션을 정의할 때 사용한다.
<article> : 문서 내에서 그룹화해서 분리하는 역할
section article 차이
▷ article은 내용이 독립적이다.
article 태그는 section과 다르게 독립적으로 존재할 수 있으며 재사용할 수 있다.
즉 article이 좀 더 구체적이다.
주로 블로그글, 포럼, 뉴스 기사 등을 article로 묶음
▷ section은 주제별로 구분한 그룹이다.
논리적으로 관계있는 요소 또는 문서를 분리할 때 사용한다.
다른 주제의 문서를 구분 짓기 위해 사용 (주제별 영역들을 그룹화)
※ 논리적인 관계가 없는 요소들을 그룹화할 경우에는 div를 사용한다.
line-height : 줄 높이를 정하는 속성이다.
float : float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게 한다. 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다. 그래서 보통 레이아웃을 구성할 때 요소를 가로 정렬하기 위해 사용되는 기법이다
float 속성
none : 요소를 떠 있게 하지 않는다.(기본값)
right: 요소를 오른쪽으로 이동시킨다.
left : 요소를 왠 쪽으로 이동시킨다.
overflow : css에서는 overflow 속성을 통해서 주어진 공간이 모자라 넘치는 콘텐츠를 어떻게 보여줄지를 제어한다.
overflow에 사용할 수 있는 값은 네 가지가 있다.
- visible : 기본 값입니다. 넘칠 경우 콘텐츠가 상자 밖으로 보입니다.
- hidden : 넘치는 부분은 잘려서 보이지 않습니다.
- scroll : 스크롤바가 추가되어 스크롤할 수 있습니다.(가로, 세로 모두 추가됩니다.)
- auto : 콘텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정됩니다.( 필요에 따라 가로, 세로 별도로 추가될 수도 있습니다.)
<a> : 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용합니다
border : 테두리를 만드는 속성
margin : border를 중심으로 바깥쪽의 바깥 여백을 의미한다.
padding : border 중심으로 안쪽의 안쪽 여백을 의미한다.