엘리스트랙 AI 8기 수업 첫날 배운 것들
HTML...관련 설명은 웹프 시간에 들었으니 패스
HTML TAGS
strong 태그: 글자를 강조하는 태그
a href태그: 링크를 연결하는 태그
클래스 설명으로 연결하는 태그(동작하지는 않음)
img태그의 src 값에 이미지 주소를 복사해 첨부,
alt에 이미지를 표시할 수 없을 때 이미지를 대체할 문구를 적어준다.
width,height 를 통해 넓이와 높이를 조절할 수 있다.
h1 태그는 한번만 사용하는 게 좋다!
h2
h3
h4
h5
h6
| 1열 | 2열 |
|---|---|
| 1-1 | 2-1 |
| 2-1 | 2-2 |
<h2>HTML TAGS</h2>
<strong>strong 태그: 글자를 강조하는 태그</strong>
<a href="https://velog.io/@utael706">a href태그: 링크를 연결하는 태그</a>
<img src="https://644.kr/images/nc644-character-doguri.png" alt="노트북 보는 도구리" width="300" height="300">
img태그의 src 값에 이미지 주소를 복사해 첨부,
alt에 이미지를 표시할 수 없을 때 이미지를 대체할 문구를 적어준다.
width,height 를 통해 넓이와 높이를 조절할 수 있다.
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<table>
<caption>표를 만들기 위한 table 태그</caption>
<th>1열</th>
<th>2열</th>
<tr>
<td>1-1</td>
<td>2-1</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</table>tip1) vscode에 lorem을 입력하고 enter키를 누르면 Lorem,ipsum...으로 시작하는 예문이 나온다.
tip2) vscode에서 명령 팔레트를 열고 wrap with abbreviation 기능을 단축키로 사용하면 편하다.
근데 자꾸 백스페이스 키를 단축키 조합으로 인식해서 포기함
tip3) ul>li 누르고 엔터치면 ul과 ul 아래에 li태그가 자동으로 생성된다. ul>li*5 하면 5개의 li가 생성됨!
id와 class
id와 class는 모두 element가 아닌 attribute(속성)다.
요소에 직접적으로 나타나지는 않지만 추가적인 정보를 주고 싶을 때 사용한다.
ID 태그
element(요소)에 id 속성을 부여하기 위해서 아래 코드를 사용한다.<h4 id="idtag">ID태그</h4>id는 한 html 문서에서 한번만 사용할 수 있다.
css에서 id를 선택하는 선택자는 #id다.
class 태그
<h4 class="classtag">class 태그</h4>반면 class 태그는 한 html 문서 내에서 어려번 사용할 수 있다.
css에서 class를 선택하는 선택자는 .class 다.
WEB
웹은 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미한다.
그렇다면 인터넷은 무엇일까? 인터넷은 전 세계적으로 연결되어있는 컴퓨터 네트워크 통신망을 일컫는 말이다.
그럼 네트워크는? 두 대 이상의 컴퓨터를 케이블로 연결하는 것.
이 부분이 이해가 잘 안 가서 다시 검색해서 내가 이해할 수 있는 말로 수정함
웹 1.0은 군사용으로 주로 사용되었기 때문에 단방향적 구조로 되어있고, 웹 2.0은 민간,기업용으로 사용되기 시작하면서 쌍방향적 구조로 변화했다. 웹 3.0은 블록체인과 같이 탈중앙화된 구조로, 각 사용자가 서버이자 클라이언트의 역할을 할 수 있다.
서버와 클라이언트
앞서 웹3.0에서 언급한 서버(Server) 는 서비스를 제공하는 주체로 서비스를 제공하는 소프트웨어가 실행되는 컴퓨터도 포함된다.
클라이언트(Client) 는 서비스를 요청하는/사용하는 컴퓨터이다. 서버에 요청을 보내고 사용한다. 웹브라우저는 웹클라이언트 프로그램이다.
서버와 클라이언트가 동작하는 부분을 잘 이해하지 못해서 예시를 가져왔다.
A 컴퓨터(클라이언트) 에서 웹브라우저 검색창에 http://info.cern.ch/index.html 라는 링크를 입력하면 http://info.cern.ch 의 주소를 가진 B 컴퓨터(서버)에 'http://info.cern.ch/index.html의 파일 코드가 필요하다'는 신호가 전달된다. B컴퓨터에 설치된 웹서버 프로그램은 디렉토리에서 index.html을 검색하고, html파일의 내용(코드)를 전달한다. A컴퓨터(클라이언트)는 전달받은 코드를 읽어 웹페이지를 화면에 표시한다.
WAS(Web Application Server)
위의 예시를 좀 더 살펴보자. A컴퓨터(클라이언트)의 요청사항을 전달받는 B컴퓨터는 WAS에 해당한다. WAS 중 웹서버는 클라이언트로부터 직접 요청사항(HTTP request)를 전달받아 해당 요청을 서비스(제공-반환으로 이해해도 될듯 )해주는 서버이다. 여기서 조금 헷갈렸는데, 서비스라는 단어 안에 처리를 포함해서 이해했기 때문인 것 같다. 그리고 웹서버에서 받은 요청을 웹컨테이너에서 처리한 뒤, 다시 웹 서버로 전달해 클라이언트에게 처리된 요청을 전달해준다.
사실 이 부분은 아직 정확하게 모르겠어서 내가 이해한 부분만 적었다.
나중에 다시 정확하게 배우고 나서 다시 추가해야겠다.
CSS
애증의 CSS
CSS는 외부 스타일시트/내부 스타일 시트/인라인 스타일을 통해 적용할 수 있다. 외부 스타일 시트를 사용하기 위해서는 .css 파일을 생성해 <link rel="stylesheet" href="style.css"> 를 head 태그 내에 작성해줘야 한다.
내부 스타일 시트는 head 태그 내에 style 요소 내부에 CSS스타일을 작성하면 되고, 인라인 스타일은 적용하고 싶은 태그에 style을 작성하면 된다. 인라인 스타일은 가장 유지보수가 어렵고 코드를 이해하기 힘들게 하므로 가장 추천하지 않는 방식이기도 하다.
css 속성 중 float은 웹페이지의 레이아웃을 작성할 때 사용된다. 텍스트 이외에도 색상,이미지의 레이아웃을 잡을 수 있다.
clear는 float 속성이 적용된 후에 나타나는 요소들의 동작을 조절할 때 쓰인다. float을 해제한다고 이해했다.
value는 float과 비슷하지만 both가 추가된 것이 다르다.
CSS는 velog로 표시하기가 좀 번거롭다...캡쳐 외에는 방법이 없나?
