2024년 4월 3일 HTML

오늘부터 웹에 대해서 배워볼꺼야 그래서 다음에 웹사이트 구현도 해볼꺼니까 이번 파트도 끝까지 따라와라~

 

웹을 알아보고 사용을 하기 위해선 툴이 필요하지? 그 사이트는 아래에 링크를 걸어둘께

그러니까 링크부터 들가서 먼저 설치부터 진행하고 읽어 이미 설치가되어있으면 상관이 없고? VS 바로 가보자

메인화면

제일먼저 VS를 깔면 메인페이지가 이렇게 구성이 되어 있어

왼쪽상단에 Explorer가 있는데 클릭하면 창이 하나 뜰꺼야 그래서 거기서 폴더를 추가해주면 옆에 창처럼 메모지가 뜰꺼야

폴더는 폴더모양에+표시있는거 클릭하던가 마우스왼쪽 두 번 클릭하고 New file눌러서 제목지정하고 생성하면 되

첫 번째는 특징들을 적어본거고 밑에는 기본적은 구조를 적어본거야 

내가 기본적으로 작성한걸 캡쳐해서 일단 올려줄께

기본적인 내용들이고 코딩으로 구현해보고 설명을 해줄께 내가 여기서 언급하는 것만 잘 기억하고 있으면 될거같아

기본적인 구조를 설명했었지? 헤드부분에는 제목이고 바디는 몸통이야 그래서 위에서 처럼 작성하고 실행해주면?

이렇게 내 크롬화면에 내가 만든코드가 웹사이트 형식으로 구현되는게 보이지

&lt;p#&gt;가 <p>인거야 그리고 <br>을 쓰면 줄바꿈이 이루어지는거야

h1이 제일 굵기가 크고 h6이 제일 굵기가 작은게 보이지? 시력검사하기 딱 좋지?

여기 보면 b태그랑 strong태그가 똑같고, i태그랑 em태그가 똑같은게 보이지?

strong태그랑 em태그는 최근에 나온 거라고 생각하면될거 같아 그니까 좀 더 기능이 추가가 됬구나라고 생각해!

주석으로해놓은건 명령어같은느낌이야 저거 치고 엔터치면 자동으로 코딩을 짜줘 그리고 <hr>은 수평선을 그어주고^^

이미지 태그는 내용이 좀 많아 그래서 집중해서 봐보자

제일 먼저 TCP스쿨 로고를 띄어보자 저것만 띄어보자 그러면 이렇게 화면에 로고가 뜨는게 보이지

그럼 다음으로 밑에 비 이미지까지 뽑아볼까?

직접적으로 파일을 열면 보인

 근데? 이미지가 안 보이지? 근데? 여기서? 오잉? 파일탐색기에서 내가 만들어놓은 이미지태그 html파일을 직접적으로 열면 이미지가 나오잖아? 그래서 사람들이 사용을 안해 왜냐면 코드를 짜서 보여야되는데 파일들어가서 열꺼면 왜 써?

코드로 짜서 그 사람이 보이면? 그건 같은 파일안에 같은 폴더이름을 사용하고 있다는건데? 같은 사람이거나? 이중인겨ㄱ

그래서 절대경로를 잘 쓰지를 않으니까 상대경로로 해서 이미지를 불러오자는 거지

 

./로 해서 이미지명.확장명 이렇게 적어주면 이미지를 코딩으로 해서 보여줄 수 있다는거지

그럼 다음 rain3이미지를 뽑아볼까?

이렇게 이미지 출력하는거 까지 해봤어

 

https://info.cern.ch/ >>> 최초의 웹 사이트

http://info.cern.ch

https://code.visualstudio.com/ >>> VS코드 설치

Visual Studio Code - Code Editing. Redefined

https://www.iconfinder.com/ >>> 무료 이미지

8,350,000+ free and premium vector icons, illustrations and 3D illustrations

글로 적어놓은건 한 번씩 읽어보면 좋을꺼 같아 나는 VS코드위주로 보여줬으니까 다른 개념들은 알아서 보면 될거같아