목록코딩 공부 (70)
인생은 여행 人生は旅
◎ 클라이언트(고객)가 서버에 무언가를 요청하면 서버는 거기에 맞는 응답을 하여 정보를 보내준다. 내가 만든 코드를 저장해둘수 있고, 그 코드들은 업로드하여 전 세계에서 볼 수 있는 웹페이지를 만들 수 있다. GitHub 란 사이트에선 단순히 저장만 할수 있는 게 아니라 이렇게 Pages란 메뉴를 통해 내가 만든 사이트를 어디서든 웹사이트를 통해 볼수 있도록 해준다 ^^ 신기하게도 내가 입력했던 HTML 코드를 어디서든 볼수 있는 웹사이틀 만들어 보았습니다~ GitHub란 사이트를 통해 굉장히 간단히 진행 되었습니다 ^^
비주얼 스튜디오로 하나의 웹 페이지에서 3개의 링크를 연결해주는 웹사이트를 만들었습니다 ^^ 웹이 생겨난 역사까지 공부 ^^ 어떤식으로 현재 사용하고 있는 웹페이지가 구동되는지 공부가 되었던 거 같네요 ㅎㅎ
doctype html> ◎ HTML 문서로 작성되었다는 뜻으로 가장 위에 써둔다. ◎ 가장 넓은 범위로 이 안에 모든 Tag가 작성된다. WEB1 - html ◎ 그 다음으로 넓은 범위 - 제목을 적는다. 타이틀 태그안에 쓰여진 문구는 웹 브라우저 상단에 표시된다. 그리고 한글을 표시하려면 태그를 사용하여 utf-8 형식을 지정해줘야 한다. ◎ 이 Tag 안에 본문을 작성한다. Hypertext Markup Language (HTML) ◎ - 링크를 넣고 싶을 때 사용한다. href="링크주소입력" Hypertext Markup Language (HTML) is the standard ◎ 새로운 창에 링크를 띄우고 싶을땐 target="_blank" 를 사용하고 타이틀도 넣고 싶을 땐 title="" ..
◎ 웹페이지를 만들 때 이쁘게 보이기 위해 그림으로 만든다면 시각장애인들은 사용할 수 없는 정보가 되어 버린다. 그래서 HTML을 이용해서 웹페이지를 만드는 것이 비즈니스측면에서도 중요하지만 휴머니즘 측면에서도 중요! ◎ : 줄 바꿈 / 대신 사용가능 ◎ img : 그림 파일 넣을 때 사용 - img 뒤 사진의 이름을 지정해 주는 src= "파일 이름" width=" % " 로 폭을 설정해 준다. ◎ul : 부모 Tag / li(list) : 자식 Tag - 이 두 가지 Tag는 항상 같이 쓰인다. 대신 를 사용할 수 있다. - Unordered List 대신 - Ordered List을 쓰면 제목 앞에 숫자가 자동으로 넘버링된다. HTML 화면에선 별로였는데 Web에서 깔끔한 결과물을 보니 기분이 좋아..
*** : 글씨 진하게(Bold) *** : 밑줄 표시(UnderLine) 비주얼 스튜디오 파일명 옆에 보면 흰색 점 표시는 내가 입력한 코드가 아직 저장되지 않았음을 의미. 저장을 한 다음 웹페이지를 띄워둔 브라우저에서 새로고침 해주면 새롭게 입력한 코드가 적용되었음을 확인할 수 있다. *** : 폰트 크기 조정 Tag (1~6까지만 있다) HTML> HTML HTML HTML HTML HTML ✩ HTML TAG의 종류는 아주 많기 때문에 다 외울 수 없고 외울 필요도 없다. 그때그때 상황에 맞는 TAG가 어떤 게 있는지 검색할 수 있는 능력만 기르면 O.K! ✩ 생활코딩이라는 유튜브에서 수업을 듣고 있는데, 누구신지 정말 쉽고 재미있게 설명해 주시네요 ^^
용어들은 많이 들어봐서 익숙하지만 정확한 의미를 파악해 본 적은 없는 단어들 하지만 코딩이란 낯선 세계에 들어가기 위해선 필요한 듯 하니 차근차근 공부를 시작해 보겠습니다 :) ◎ 코딩이란 뭘까?(Coding) 내가 원하는 내용을 컴퓨터 언어를 통해 Web에 보여주는 것? ◎ HTML(Hyper Text Markup Language) Web Page를 만드는 컴퓨터 언어중 하나인데 가장 쉽다고 한다 ^^ 코드를 입력하기 위해서 필요한 Visual Studio Code 프로그램을 우선 설치하여 아주아주 간단한 Web Page를 나타내주는 실습까지! 데스크톱에 web 란 폴더를 만들고 비주얼스튜디오에서 1.html 이란 파일을 생성 정말 간단한 코딩 예시를 따라 해 보았습니다. ^^