안녕하시렵니까
오늘은 day 2 가보자고 레스기릿
아직 html 한발 남았다
아침엔 어제 배운 것들을 활용해서 내 전용 축구 네트워크 페이지를 만들어봤다.
어제 만든 hmtl 태그 중에서 오늘 추가된 것들 추가해보겟슴.
| 분류 | 태그 명 | 기능 | 내용 |
| line 1 | <!DOCTYPE html> | n/a | <!DOCTYPE html>로 항상 시작! |
| line 2 | <html lang="ko"> | n/a | 마! 한국어다! |
| head | <head> </head> | 헤드, 탭 | <head> </head>: 탭 이름 |
| <meta> | 부수적, 구글에서 검색했을 때 보여주는 모든 부수적 명시 기능 | Self-closing tag <meta content="This is my website" name="Description"/> <meta charset=utf-8> 필수적임, 영어 외 다른 글자 깨짐을 방지 |
|
| body | <h1> </h1> | 제목 | - 텍스트 크기 조정 - size: h1 > h2 > h3 > h4> h5 > h6) |
| <ol> </ol> | ordered list | 코드: <ol> <li> beer </li> <li> kimchi </li> <li> 불고기 </li> </ol> 결과: 1. beer 2. kimchi 3. 불고기 |
|
| <form> | form | 입력할 수 있는 네모 박스 | |
| <label> | label + for | input에 대한 설명 <form>
<label for="profile">Profile Photo</label>
<input id="profile" type="file" accept="images/*,.pdf, video/*">
|
|
| <input> | input+id | label과 Input은 서로 짝궁처럼 붙어다녀야 된다. label에서 이 폼이 무엇인지 설명, 인풋은 그 안에 어떤 value가 들어가야되는지 설명. | |
| <div> | division - 박스라고 생각하면 됨 | 옆으로 늘어나지 않고 상하로 위치, div는 팀원이 볼때 어떤 의미인지 모르니까 되도록이면 header, navigation 또는 footer처럼 잘 읽힐 수 있도록 이기적이지 않게 잘 알 수 있게, 효율적이게, 남이 잘 알아볼 수 있도록 적어라잉. | |
| <span> | span - 짧은 phrase | <span> word </span> | |
| <ul> </ul> | unordered list | 코드: <ul> beer kimchi 불고기 milk </ul> 결과: beer kimchi 불고기 milk |
|
| <a> </ㅁ> | anchor | link로 연결되는 태그 - href랑 짝궁이다 |
|
| <href> </href> | http reference or hyperlink reference | go to google *target="_blank" 는 링크를 누르면 새로운 탭에서 열리는 기능이다. |
|
| <img> | image + src | self closing tag - 이미지는 텍스트가 아니기 때문임 - 로컬에서 이미지를 끌어올때에, 이미지 확장자를 똑같이 적어야 됨 <image src="데스크탑이미지.jpg> 만약 데스크탑 이미지가 Img 폴더 안에 있을 경우, img/ 를 붙여야 됨 <image src="img/데스크탑이미지.jpg> |
|
| <p> </p> | paragraph | paragraph를 위해 사용 | |
| <pre> | pre | paragraph 보다 폰트가 더 귀엽게 생겼음 |
옥게이 이제 CSS 시작해보겠음
1. CSS는 새로운 파일에 적을 수 있고 적고 있던 html에 <style></style>태그를 추가해서 적을 수 있음
- 만약 새로운 파일에서 불러올 경우 <link href="styles.css" rel="stylesheet">
2. CSS는 항상 ";" 로 마지막 해야됨
3. 단어 간 스페이스는 항상 -로(ex, background-color) 해야되며, /_ 이런 건 갖다버려 이자식아 (빠더너스 아는 사람이면 그 말투예요)
4. html 내 css를 적을 시, 항상 <head></head> 내 적어야 됨
5. css는 위에서부터 아래로 순차적으로 읽히기 때문에 cascading!!! 제일 마지막 적은 줄의 css가 적용 됨
6. 모든 페이지는 박스로 이루어짐
-
<Div>
- <div> 태그는 박스를 구성하고, block이기 때문에 옆에 아무것도 올 수 없음 => called block
예를 들어~~~~ <div> </div> <div> </div> <div> </div> 요딴식 안된다 이말이다 이자식아!!!
- 반면에, <span> <link> <img> 같은 놈들은 <span></span><span></span>이 올 수 있음 => called inline(in the same line)
| 분류 | Block | Inline |
| 종류 | <div> | <span> <link> <img> |
| 넓이, 높이 존재 여부 | width, height 존재 | 존재하지 않음 span{ display: block; } 이렇게 코드 짜면 block으로 바뀜 |
| property | 박스다 박스 | 박스 아님 |
<*>
- *는 전체를 뜻한다. 아래와 같이 * + border은 모두 전체 텍스트에 적용된다고 볼 수 있다.
- class 는 같은 id를 묶어줌으로서 css에 .class 라고 치면 속성을 바꿀 수 있음 Id(#first, #second 써서 꾸미는 것)와는 다르게
이름이 달라도 한꺼번에 바꿀 수 있는 태그라고 볼 수 있다.
.btn{
padding=20px;
}
.tomato{
background-color: tomato;
}
.teal{
background-color: teal;
}
<span class="btn tomato"> hello </span>
<span class="btn teal"> hello </span>
<span class="btn tomato"> hello </span>
<span class="btn teal"> hello </span>
<flex>
- flex 는 박스를 어디든 둘 수 있어서 좋음 없다면 간격을 때려 맞출 때까지 계속 조정해야됨 ㅋ
- 항상 the parent one, not the children <body>의 css 에서 수정해야 됨, 전체적인 framwork를 수정해야 간격을 맞출 수 있음
-flex는 두개의 축을 가지는데 defalut axis is horizaontal, and 교차축 is vertical.
(좌우)justify-content: space-between; - Main axis
(위아래)align-items: center; - crossborder axis
- <body>가 height 를 가지고 있지 않는다면 align item를 설정하더라도 바뀌지 않는다.
이 경우 height 를 추가할 것. ex, height: 100vh = viewport height which means 화면의 넓이가 100% 라는 것.
| 분류 | Margin | Padding | Border |
| 정의 | 경계의 바깥에 있는 공간임 | box 경계로부터 안쪽에 있는 공간 | box 경계를 뜻함 |
'Programming > HCJ(html_css_javascript)' 카테고리의 다른 글
| 카카오톡 프렌즈 스크린 만들어보기(전편 참고) (0) | 2023.02.11 |
|---|---|
| html+css로 카카오톡의 친구들 리스트 만들어보기 (0) | 2023.02.10 |
| html + css로 깨깨오톡 로그인 페이지 만들어보기 (0) | 2023.02.09 |
| css tags 정리(class, id, 등등) (0) | 2023.02.08 |
| html이란? css 이란? javascript란? (1) | 2023.02.06 |
