HTML

span 태그

<span>이름: 정재유</span>

span 태그를 사용하면 줄이 바뀌지 않고 한줄로 이어저 나오게 됩니다.
이렇게 한 줄에 이어서 나오는 태그를 inline-element 라 합니다.

< 사진의 노란색 부분은 해당 요소가 차지하는 영역입니다. >

span 태그의 경우 요소가 차지하는 부분이 텍스트의 크기와 같아 css를 통한 오른쪽 정렬이 되지 않습니다.

a 태그

<a href="링크주소" target="_blank">a 태그?</a>

a 태그 내 target 속성을 통해 새창에 띄울지 결정할 수 있다.
_blank 속성은 새창에 띄우며 _parent, _self, _top 속성이 존재한다.

CSS

font-family

#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}

css를 통해 title 이라는 id를 작성했을때 font-family를 통해 폰트를 적용시킬수 있다.
위의 코드의 경우 브라우저가 Georgia 폰트를 지원할 경우 Georgia 폰트를 사용.
Georgia 폰트 미지원시 Times New Roman 폰트를 사용.
Times New Roman 폰트 미지원시 Times 폰트를 사용.
Times 폰트 미지원시 serif 폰트를 사용.

이처럼 좌측에서부터 지원되는 폰트를 찾아 적용시킨다.

Times New Roman 폰트와 같이 폰트의 이름에 띄어쓰기가 있을경우 ""를 사용해서 묶어준다.

color

h1 {
 color: #eb4639;
}
h1 {
 color: rgb(235, 70, 57);
}
h1 {
 color: hsl(4, 82%, 57%);
}

이처럼 색상은 세가지 방식을 이용하여 표현할 수 있으며 세가지 모두 같은색 입니다.

• hex 색상코드: 여섯자리로 표현 - #eb4639
• rgb 값: 빨강, 초록, 파랑으로 표현 - rgb(235, 70, 57),
• hsl: 색상, 채도, 명도(hue, saturation, lightness)로 표현 - hsl(4, 82%, 57%)

구글에서 "color picker"라고 치거나, "color picker hex color"등의 키워드로 검색하면, 내가 원하는 색상을 뽑아주는 여러 앱들이 있습니다.

text-indent

.class-name {
  text-indent: 50px;
}

HTML에서는 스페이스와 엔터를 아무리 추가하여도 실제로 적용되지 않습니다.
이처럼 css스타일을 활용하여 공백을 넣거나 할 수 있습니다.

 

css가 아닌 타이핑을 통해 스페이스 한개 공백을 넣기 위해서는 위의 코드를 사용하면 된다.

box-sizing

* {
  box-sizing: border-box;
}

border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.

what-is-

.what-is-blockquote, span, p {
  color: green;
}

what-is-를 사용한 Grouping을 통해서 여러 태그, 클래스에 손쉽게 스타일을 지정할 수 있다. 위의 예시는 blockquote, span, p에 초록색 글씨 스타일을 적용했다.