Frontend/HTML (5) 썸네일형 리스트형 [HTML] Web 이론 1. Internet VS Web 인터넷과 웹은 같은가? 다르다. 인터넷이 도시라면 웹은 그 도시 위에 있는 건물 하나. 인터넷이 도로라면 웹은 도로 위를 달리는 자동차 한 대. 인터넷이 운영체제라면 웹은 운영체제 위에 있는 프로그램 하나. ∴ Internet > Web 2. Server와 Client '웹 브라우저' 컴퓨터, '웹 서버' 컴퓨터. 이 두 대의 컴퓨터는 인터넷으로 연결되어 있음. 웹 서버가 깔려 있는 컴퓨터는 info.cern.ch 라는 주소를 갖고 있고 하드디스크가 있는데 여기에 index.html이라는 파일이 저장되어 있음. 웹 브라우저에서 info.cern.ch/index.html 이라고 입력하고 엔터치면, 이 웹 브라우저가 깔려 있는 컴퓨터에서 전기적인 신호를 info.cern.c.. [HTML] 태그 4 - 링크 연결, 동영상 삽입, 체크박스, 주석 처리 1. 링크 연결 - 타 사이트로 연결 (링크 걸고 싶은 텍스트): 링크를 걸 수 있게 해줌. ( h: hypertext, ref: reference(참조)) (링크 걸고 싶은 텍스트): target 인자 추가해주면 새 탭에서 열리게 해줌. 인자로 title="html specification" 추가하면 툴팁으로 밑에 작게 어떤 링크인지 미리 알려줌.(마우스 링크 위 놔뒀을 때) - 코드파일로 연결 넘어갈 링크 지정해줄 때 꼭 타사이트 링크가 아니더라도 코드파일도 가능함. 예를 들어 한 폴더안에 전체 큰 웹사이트 코드 파일, 그 웹사이트 안에 들어갈 작은 또다른 페이지들의 코드 파일 등 다 넣고, 그 작은 페이지 코드 파일을 링크로 지정해주면 넘어감. 2. 동영상 삽입(eg. 유튜브) 유튜브에서 공유 ->.. [HTML] 태그 3 - 가장 많이 쓰이는 태그들 (문자) : 웹페이지의 제목을 지정해줌. (인터넷 창의 탭 부분이 바뀜) : vscode 프로그램 오른쪽 하단에 utf-8이라고 저장되어있음. 따라서 웹 브라우저를 열 때도 utf-8로 열어야 오류가 안 생김. 관용적 표현: 최고위직 태그: 고위직 태그: , - 위 과 은 본문과는 다름. 따라서 로 감싸주어야 하고, 본문은 로 감싸서 구분해주어야 함. 따라서 HTML의 모든 태그는 태그 혹은 태그 둘 중 하나 아래에 놓이게 됨. 그리고 이 모든 내용을 로 감싸주어야 함. 마지막으로, 이 문서가 HTML이라는 뜻을 나타내기 위해 관용적으로 이라고 맨 위에 써주면 됨. [HTML] 태그 2 - 이미지 삽입, 리스트(목차) 생성 : 이미지 삽입 - src는 source의 줄임말. - 여기서는 예시로 unsplash.com의 이미지를 이용함. - "넣을 이미지 주소", 즉 이미지의 위치는 내가 지금 작업하는 폴더 안에 같이 있어야 함.(HTML과 같이 있어야 함.) - 로 width까지 지정해주면 크기 조절 가능.(숫자 100% 해주면 꽉 참.) - src와 width를 속성이라하고, 어떤 걸 먼저 쓰든, 위치는 상관 없음. (문자) : 리스트 생성 ( 만 단독으로 썼을 때는 동그라미 기호 생성되고 줄바꿈 해줌.) (문자) : 서로 연관된 항목을 경계 짓고 그룹핑 해줌. 들여쓰기 해줌.(아래 들여쓰기 직접 한 건 상관없음. 나 보기 편하라고 탭 누른 것) - 태그는 태그의 부모태그. (당연하게도 는 자식태그.) 즉 태그는 반드시 .. [HTML] 태그 1 - 글자 디자인, 단락, 줄바꿈 등 (문자) : 글자 진하게 표시 (문자) : 밑줄 표시 ~ : 진하게, 줄바꿈 - h7은 없음. 제목을 나타내는 태그로 주로 씀. h1이 가장 크고 진함. : 줄바꿈 - 열리는 태그와 닫히는 태그 없음. 여러 번 쓰면 여러 줄 띄워짐. : 한 단락을 지정해서 구분시켜줌. 다음 단락 줄 띄워줌. - 그러나 띄워지는 그 여백(단락사이 공간)은 정해져있음. 그래서 첫 번째 단락과 두 번째 단락 각각 태그로 감싸더라도 띄워지는 여백(단락사이 공간)은 첫 번째 단락만 감쌌을 때와 동일함. 이전 1 다음
