위코드에서 HTML,CSS를 다시 공부하면서 중요하다고 생각하는 것들 혹은 다시 알게된 것들을 끄적끄적 정리해보았습니다.
1.HTML 정의 ,기능
정의, 기능 : HTML이 헤더, 문단, 테이블 등으로 정보를 조직화하는 구조를 제공해주는 역할
태그 - 속성, 요소
2 태그
태그는 크게 보면 html , head , body로 볼 수 있다.
<\span> 줄이 바뀌지 않고, 한 줄에 이어서 나오게 됩니다
span과 바로 이어져서 span (span span) : 이런 형식
<\p>태그는 <\span>태그와 달리 줄바꿈이 일어납니다.
p는 다음 단락으로 넘어간다.
3 속성
id - 고유한 값 (중복 x) 중복된 이름을 사용하면 안된다.
class - 여러태그에 중복된 이름 부여 가능
(div, p 값등 한번에 같은 클래스를 줄수 있고 이를 통해 CSS 수정이 용이! )
4 css 소개
CSS는 HTML이 아름다워 보이도록 스타일을 입히는 것입니다.
css적용
인라인 스타일 - 각 태그에 부여 , 빠르고 편리하지만 많으면 유지보수 힘듬 , 가독성 떨어짐
style 태그 - html 파일내 style 사이에 작성한다. (빠름, but 유지보수 부적합 )
css파일 작성 - 연동!
< link href="index.css" rel="stylesheet" type="text/css" />
(link 앞에 띄어쓰기 하였다. 복붙해서 사용하려면 link앞에서 백스페이스!)
href = 경로 작성 할때,
rel 은 관계를 설명해줌 , css파일은 항상 stylesheet 값 입력
type = 연결되는 파일이 무엇인지. css는 항상 text/css 입력
글씨에 줄 추가 태그 !
text-decoration: overline; : 윗줄 추가
text-decoration: line-through;: 가운데 줄 추가 (지움선)
text-decoration: underline; : 밑줄 추가
text-decoration: underline overline;: 밑줄, 윗줄 추가
5 font style
font family
- font-family: Georgia, "Times New Roman", Times, serif; : 안될경우(지원되지 않는 경우) 순서에 맞춰 다음 폰트가 적용 된다.
- 폰트에 띄어 쓰기가 있으면 쌍따옴표를 사용해야 한다.
font weight
- 숫자 400과 normal은 같은 두께입니다.
- 숫자 700과 bold는 같은 두께입니다.
color 는 글자색
색 표현 방법
- hex 색상코드: 여섯자리로 표현 - #eb4639
- rgb 값: 빨강, 초록, 파랑으로 표현 - rgb(235, 70, 57),
- hsl: 색상, 채도, 명도(hue, saturation, lightness)로 표현 - hsl(4, 82%, 57%)
6 text style
정렬
text-indent 을 이용하여 css로 들여쓰기가 가능하다. 값은 px값
blockquote 이란 태그는 인용구문을 넣을 때 쓰는 태그
& nbsp; : 띄어쓰기를 의미한다.
7 border
두께 선스타일 선색깔; 의 순서로 작성한다.
개별로 선스타일을 줄수 있다.
내가 원하는대로 디자인할 수 있으니 대부분의 개발자는 border-bottom로 구현하는 것을 선호한다! (밑줄 기능으로 여러 스타일을 줄수 있거든!)
8 box-sizing
box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다.
Content box : width를 content크기로 지정한다.
Border box: width를 actual width크기로 지정한다.
box-sizing: border-box; : 실제 크기로 지정해서 원하는 값을 넣고 바로바로 크기 지정
9 css에서 배경지정
css에서도 배경 이미지를 넣을수 있다
background-image: url()
background-color: 배경 색 추가
html은 img 태그를 사용한다.
- img태그와 css 이미지 삽입 방법의 차이점
img 태그
alt를 사용하여 이미지가 뜨지 않았을때 이미지 대신 보여줄 텍스트를 사용할수 있다.
html에서 크기 조절이 가능하다. 하지만 유지보수가 좋지 않다.
css이미지 삽입 방법
한번에 여러개의 이미지 크기를 변경하기 좋다.
가로세로 중 하나의 값만 입력해도 나머지는 자동적으로 맞춰준다.
10 inline성질로 변화하는 방법
float 과 display: inline-block ;
반대로 block성질로 변경
display: block;
11 table
테이블은 항상 < table> 태그로 감싸져있습니다.
< table> 태그 내에 행도 만들고, 열도 만드는 것입니다.
한 행을 시작할 때는 < tr> 로 시작합니다. tr은 table row의 줄임말입니다.
각각의 셀은 < tr> 태그 내에 < td> 태그를 사용합니다. td는 table data의 줄임말입니다.
th는 table heading의 줄임말
rowspan 은 행 병합, colspan 은 열을 병합합니다
12 input
placeholder: 도움말을 넣어주는 부분입니다. 반투명하게 글씨가 보인다
< input type="text" placeholder="ID">
< input> vs < textarea>
< textarea> 는 < input> 보다는 더 긴 텍스트를 입력받고 싶을 때 사용합니다.
보통 짧은 방명록이나 댓글을 입력할 때 < textarea> 태그를 사용합니다.
textarea의 value는 input의 placeholder 와 같다.
< input type="text" placeholder="ID"> = < textarea value=“ID”> < /textarea>
=
< input> 은 시작태그, 끝태그로 구성되지 않습니다. textarea는 끝태그가 있다.
공통점은 모두 인라인 요소
< textarea>의 사이즈 조정 금지 방법
textarea { resize: none; }
CSS attribute 값에 속성 넣기
::placeholder : 콜론 두개를 붙여서 selector를 만들어 줄수 있다.
input[type="text"]::placeholder ( text 타입에만 스타일을 준다. )
rgba라는 것은 opacity를 넣는 다는 뜻입니다.
< div> 태그에 대해 요소를 하나의 논리적인 그룹으로 묶거나, 페이지의 구획을 정의할 목적으로 사용됩니다.
13 반응형 웹
@media only screen and (max-width: 480px){}
@media : 이 키워드는 media 쿼리를 시작하겠다는 의미입니다.
- only screen : 어떤 디바이스에서 적용하는지 알려줍니다. 예를 들면 프린트를 하고싶을 때 적용하려면 only print라고 작성하면 됩니다. screen이라고 할 경우 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용됩니다.
- and (max-width : 480px : 이건 media feature라고 불리는 부분입니다. 어느 조건에 아래의 css를 적용할지 작성해줘야 합니다. and를 활용하여 여러 조건을 같이 쓸수 있다.
