본문 바로가기
반응형

컴퓨터/Front (Html, JS)47

[html] html 기본 문법 익히기_7. html div와 span 1. div와 span의 실 사용 예 2. div 태그(요소) 3. span 태그(요소) 4. div 와 span 비교 ... 1. div와 span의 실 사용 예 div와 span은 구역을 나누는 것이다. 기본 표시 값, 단위라고 생각하면 된다고 한다. 설명을 읽었을 때, 실제로 어떻게 사용되는지 바로 이해가 되지 않은 태그들이어서 네이버를 들어가 살펴봤다. 네이버에서는 보통 div 태그로 큰 블럭을 설정하고, span 태그로 자잘한 구역을 나눠놨다. 이제 실제로 어떻게 div와 span을 사용하는지 알아본다. ... 2. div 태그(요소) div 구역 - 티가 잘나게 네모 표시를 했다. - div 구역은 라인 하나를 차지한다. - 블록 수준 요소라고 한다 ... 3. span 태그(요소) 특정 장소.. 2021. 10. 15.
[html] html 기본 문법 익히기_6. html 에 데이터 테이블 (표) 셀 병합 1. 셀 병합 (열방향) 2. 셀 병합 (행방향) HTML로 이 표를 만들어보려고 한다. 보이는 것과 같이 셀이 위아래(행방향), 양옆(열방향)으로 병합되어있는걸 볼 수 있다. ... 1. 셀 병합 (열방향) 열 합치기 th, td 태그의 rowspan 속성에, 합치고 싶은 열의 개수를 적어주면 된다. 학생정보 학생이름 1 1학년 1반 김철수 1 1학년 2반 김영희 2 2학년 1반 이철수 2 2학년 2반 이영희 - head, body의 style에 적혀있는 내용은 CSS이므로 그냥 넘어간다. - CSS는 디자인을 꾸며주는 것이고, 나는 표 라인, 배경 색을 바꿔줬다. ... 2. 셀 병합 (행방향) 열 합치기 th, td 태그의 rowspan 속성에, 합치고 싶은 행의 개수를 적어주면 된다. 학생정보 학.. 2021. 10. 14.
[html] html 기본 문법 익히기_5. html 에 데이터 테이블 (표) 추가, 크기조절 1. html에 데이터 테이블 (표) 추가하기 2. 테이블 행 크기 조절하기 2-1 테이블 전체 크기 조절 2-2 행 크기 조절 ... 1. html에 데이터 테이블 (표) 추가하기 데이터 테이블 만들기 - 인덱스는 tr 태그 밑에 th 하위 태그를 단다. - 행은 tr 태그 밑에 td 하위 태그를 단다. 인덱스1 인덱스2 인덱스3 행1 행a 행ㄱ 행2 행b 행ㄴ - tr의 하위 태그를 이용해서 인덱스와 행을 자유롭게 바꿀 수 있다. 인덱스1 행a 행ㄱ 인덱스2 행b 행ㄴ 인덱스3 행c 행ㄷ ... 2. 테이블 행 크기 조절하기 2-1 테이블 전체 크기 조절 데이터 테이블 크기조절 - table 태그의 style 속성으로 조절한다. - 너비 : width 속성값, 높이 : height 속성값. - ; 으.. 2021. 10. 13.
[html] html 기본 문법 익히기_4. html body p 태그와 속성 1. html p 태그 기본 2. p 태그 줄바꿈, 띄어쓰기 2-1 p 태그 특징 2-2 p 태그 줄바꿈 2-3 p 태그 띄어쓰기 1. html p 태그 기본 여기에 단락을 입력한다. - p 태그에는 단락을 입력한다. - 여러 개 사용할 수 있다. ... 2. p 태그 줄바꿈, 띄어쓰기 2-1 p 태그 특징 내가 여기에 아무리 띄어쓰 기를 이렇게 해도 줄바꿈도 해도 html에서는 한 줄로 나온다. - p 태그에서 원하는 문구를 적을 때, 줄바꿈(엔터, \n)은 적용되지 않는다. - 띄어쓰기를 여러 번 해도, 처음 한번밖에 적용이 안된다. ... 2-2 p 태그 줄바꿈 내가 여기에 아무리 띄어쓰 기를 이렇게 해도 줄바꿈도 해도 html에서는 한 줄로 나온다. - 엔터를 넣고 싶은 위치에 을 넣어주면 줄바꿈.. 2021. 10. 12.
[html] html 기본 문법 익히기_3. html body a 태그와 속성 1. html 태그와 속성 2. html a 태그 href 속성 3. a 태그 href 속성으로 이메일 보내기 4. 버튼 링크 만들기 5. 링크에 설명 넣기 ... 1. html 태그와 속성 - 로 태그를 시작하고, 로 태그를 끝낸다. - a 태그의 href 속성이라고 읽는다. - 속성에는 속성값이 따라다닌다. 예시에서는 하이퍼링크 속성이기 때문에, 네이버 링크라는 속성값이 따라왔다. ... 2. html a 태그 href 속성 네이버로 이동 (캡쳐했더니 배경이 잘 안보여서, 배경색을 추가했다.) - a 태그의 href 속성에 "naver.com"이라는 속성값을 추가했다. - 큰따음표로 감싸지 않아도 작동은 하지만, 큰따음표를 감싸는게 관례라고 한다. ... 3. a 태그 href 속성으로 이메일 보내기.. 2021. 10. 11.
[html] html 기본 문법 익히기_2. html body img 태그와 속성 1. html 태그와 속성 2. html img 태그 2-1 img 태그의 src 속성 2-2 img 태그의 alt 속성 2-3 img 태그의 weight, height 속성 3. img 태그의 style 속성 3-1 style 속성과 css 3-2 style 속성의 float 4. a 태그와 img 태그 ... 헤더이다. 단락이다. html 기본 틀이다. 오늘은 html의 태그와 속성에 대해 (완전 기본)공부할 것이다. ... 1. html 태그와 속성 - 로 태그를 시작하고, 로 태그를 끝낸다. - a 태그의 href 속성이라고 읽는다. - 속성에는 속성값이 따라다닌다. 예시에서는 하이퍼링크 속성이기 때문에, 네이버 링크라는 속성값이 따라왔다. ... 2. html img 태그 2-1. img 태그의.. 2021. 10. 10.
[html] html 기본 문법 익히기_1. html body 대충 html 공부를 시작했다. 웹 크롤링 할 때 살짝 맛만 본거여서 이번기회에 잘 공부해보려고 한다. ... 파일 확장자를 .html로 저장하고 더블클릭하면, 크롬이나 엣지에서 html이 실행된다. ... - 여기다가 글을 입력해도 오류가 안나! 얘는 줄바꿈이다. 1. 헤더 header, h - html 헤더을 입력한다 . - 헤더은 h1부터 h6 태그로 정의된다. - 여러 개 입력할 수 있다. hl 헤더 입력 h2 헤더 입력 h3 헤더 입력 h4 헤더 입력 h5 헤더 입력 h6 헤더 입력 2. 단락 paragraph, p - html 단락을 입력한다. - 단락은 p 태그로 정의된다. - 단락도 여러 개 입력할 수 있다. p 단락 입력 p 단락 입력 3. 링크 a hyperlink, a href - html.. 2021. 10. 9.
반응형

티스토리툴바