4차 산업혁명에 대한 지식/코딩

코딩 개발 일지(HTML,CSS,태그)

hello my youth 2021. 6. 28. 14:41
반응형

코딩 배움 1주차

 

나는 코린이다ㅋㅋㅋ

그래서 스파르타 코딩 클럽에서 코딩 왕초보 탈출반을 듣고 있다. 

항상 티스토리 할때 HTML에서 수정하라고 하는 게 많았는데 이제 나도 조금은 안다.

 

HTML이 무엇인가?

-HyperText Markup Language의 약자이다. 하이퍼본문표식달기언어.

-웹의 뼈대를 만들어 주는 기능을 한다. 

예를 들어 검색창이 있으면 '네모 안에 돋보기 그림이 있다.'

'뉴스 카테고리 옆에 경제 아이콘이 있다.' 이런 식으로 큼직큼직하게 뼈대를 만들 수 있다. 

-문서 형태를 기반으로 한다. 그래서 HTML 파일 열면 <head>, <body>, </p>, <h1>.. 이런 것들이 보일 것이다. 

이것들이 무엇인지는 아래에 적겠다. 

 

CSS는?

-Cascading Style Sheets의 약자이다. 종속형 시트 또는 캐스케이딩 스타일 시트라고 부른다.

-세부 사항을 꾸며주는 역할을 한다. 

예를 들어 글꼴이나 색깔 변경 등을 할 수 있다.

 

JS는?

-javascript이다.

-웹에서 구성요소가 움직이게끔 만들어 주는 것.

 

HTML의 구성 요소

일단 <> 이렇게 돼있는 것을 '태그'라고 읽는다.

예를 들어 <head>라고 적혀있으면 '헤드 태그'인 것이다.

 

-<head> : 헤드 태그라고 읽는다. 이 태그는 바탕이 되는 흰 부분 빼고 나머지 보이는 부분이 head 부분이다. 

예를 들어서 어떤 사이트를 카카오톡으로 공유했을 때 공유한 링크가 바로 보이는 부분이 헤드 부분이다.

-<body> : 바디 태그이다. 이건 우리가 웹사이트를 볼 때 바로 보이는 흰 바탕 부분이 body 부분이다.

-<div> : 디브 태그이다. 어떤 것을 묶어서 한 번에 옮길 때 많이 쓴다.

-</p> : 문단을 나타내는 태그이다. p는 paragraph의 약자이다. 

-<h1> : 헤드 1 태그. 큰 제목 (페이지마다 하나씩 있는 것이 좋다.)

-<h2> : 작은 제목

-<span> : span  태그. 특정 글자를 꾸밀 때 쓴다.

-<a href="사이트 주소"> 하이퍼링크 </a> :하이퍼링크 연결하는 코드

-<img> : 이미지 태그. 사진, 그림 넣는 태그

-<button> : 버튼 태그. 버튼 모양 생성

-<textarea> : 텍스트 입력창 생성

-<hr> : 가로선

 

 

* ▶ :토글이라고 한다.

이걸 열고 닫는 단축키는 windows에서 ctrl+alt+t이다.

* pycharm은 무엇인가?

코딩 메모 툴이다. 파이썬을 쓰기에 가장 편한 툴이다.

pycharm에 코딩 입력하고 저장할 때는 ctrl+s 

입력한 거 어떻게 나타나는지 보고 싶을 때는 옆에 구글 아이콘 클릭해서 볼 수 있음. 

코드 고치고 나서 새로 보고싶을때는 열린 웹페이지에서 새로고침 해주면 된다.

 

일단 오늘은 여기까지 배웠다. 

외계어 같았던 코딩 용어를 알고 나니 그나마 위화감이 덜해졌다. 

이걸 배우면서 깔았던 새로운 프로그램도 신기했다. 

pycharm, slack 

이 수업을 듣지 않았더라면 이런 게 있는지도 몰랐을 것 같다. 

웹페이지를 어떻게 만드는지 배우려던 참에 8차시 밖에 못 듣는.. 것 때문에 내일 들어야 한다. 

아쉽다ㅋㅋ

 

오늘 내가 배웠던 신기한 포인트 

웹사이트 안에 있는 카테고리 이름 바꾸기↓

 

반응형