본문 바로가기

분류 전체보기

 (252)
div 페이지의 구역 나누기와 sementic 시멘틱 태그 결과는 같지만 두 가지의 버전이 있따. H N S A F div (division 디비전 분할) 화면을 분할할 때, 영역을 박스화 할 때 사용하는 태그이다. 아래에서 더 자세한 설명을 하겠다. H N S A F 시멘틱 태그란? 각 위치에 따른 태그에 의미부여를 한 것이다. 코드를 보고 어떤 부분인지 빠르게 이해할 수 있다는 장점이 있다. 웹 문서의 구조를 만들 때 꼭 시멘틱 태그를 이용할 필요는 없지만 이왕이면 사용하는 게 좋다. 시멘틱 태그가 나오기 전에는 div로 구별을 했었다고 한다. 지금도 그렇게 사용하는 곳들도 많다고 함! header 주로 상단/왼쪽에 위치하는 페이지의 제목 nav 네비게이션 줄임말로 홈페이지의 다른 페이지로 이동하거나 다른 사이트로 이동할 수 있는 메뉴 영역 section 콘..
javaScript 첫시작! 글자와 그림출력하기(기본구조) 아직 한 시간 밖에 안 배워서 부족하지만 기록해 보려고 합니다. 확장자는 똑같이 .html을 쓴다. 안에 html에서 사용하던 줄바꿈 태그 를 출력 안에 넣으면 된다. "쌍따옴표", '따옴표' 둘 다 가능! 안녕하세요! 반갑습니다! 이런 모양이 출력된다. 그런데 실제로는 이런 방법을 잘 쓰지 않는다고 한다. 자주 쓰는 유형을 살펴보자. 지금까지 태그 안에 넣었다면 이번엔 function 함수명(){ 중괄호 안에 선언을 해야한다 } 바디쪽 스크립트에서 함수명();으로 호출을 하면 끝 안녕하세요 여기까지가 기본골격이고 더 나아가자면... welcome 하나씩 나눠서 설명을 하자면... welcome 일단은 버튼부터 만들자. 태그 안에 태그를 쓰고 옵션은 onclick 버튼을 눌렀을 때 welcome 함수가 ..
html 리스트, 프레임, 불러오기 복습 전체화면 / 메뉴에 마우스 올렸을 때 / 클릭 했을 때 여기에 이런 페이지가 있다. 메인에 메뉴와 초록색 배경화면이 있는 조촐한 페이지가.. 메뉴에 마우스를 올려 놓으면 주황색이 되고, 클릭했을 때 각자의 사이트가 새 창에 뜨는 것이 아니라 아래 초록색 화면에 뜬다. 일주일 동안 내가 배웠던 것들이 이 사이트 안에 다 들어있는 것이다. 파일은 3가지를 준비하면 된다. 1. green.html 첫번째 파일 정말 별 거 없다. head - style에 배경색을 깔아주는 것 뿐이다. 2. menu.html 인천일보아카데미 인천시청 서울시청 네이버 다음 위쪽에 들어가는 메뉴를 만드는 html 파일이다. 리스트 태그를 이용해서 일단 메뉴들을 만들어준다. 하이퍼링크도 걸어준다. css에서 원하는대로 꾸며준다. 여기..
list 목록 태그 알아보기 (ol ul dl - li dt dd) 2021.09.03 - [FrontEnd/html5 + css3] - 인라인, 블록 박스, 인라인 블록 유형 설명 인라인, 블록 박스, 인라인 블록 유형 설명 Document 박스의 유형 div h1 p태그 는 블록박스 유형이고 그리고a span 태그는 인라인이며 img 태그 는 인라인 블록 유형이다. Document block과 block입니다. inline1 inline.. practice365.xyz (같이 읽기에 좋은 글) 메뉴 리스트 리스트1 리스트2 리스트3 리스트4 일단 들어가기에 앞서 태그를 알아보자. 리스트 제목으로 사용하는 p태그는 블록타입으로 리스트 안에 선언 하는 것이 아니라 밖에 선언을 하고 리스트 태그를 써줘야 한다. ordered list 정돈된 리스트 ol 리스트 리스트1 리..
인라인, 블록 박스, 인라인 블록 유형 설명 박스의 유형div h1 p태그는 블록박스 유형이고 그리고a span 태그는 인라인이며 img 태그는 인라인 블록 유형이다. block과 block입니다. inline1 inline2 inline3 inline-block-1 inline-block-2 inline-block-3
form 복습 - 다양한 효과들 적용해보기 02.form 태그연습 폼 연습 인적사항 이 름 아 이 디 비밀 번호 주민 번호 - 성 별 여자 남자 기타 사용 언어 한글 영어 독어 일어 국 적 한국 미국 중국 태국 취 미 요가 영화 러닝 테니스 이 태그들을 불 practice365.xyz form 태그의 기본 구성은 위쪽 게시글을 참고 다양한 효과들을 한 번에 적용한 탓에 미적 감각이라는 게 0에 수렴하지만.. form 태그의 옵션들을 한 눈에 볼 수 있습니다. 인적사항 아 이 디 이 름 생 일 색 상 주민번호 - 비밀번호 성 별 여자 남자 기타 취 미 여행 영화감상 요가 자수 국 적 한국 일본 중국 관심분야 철학 과학 디자인 프로그래밍 찾 기 메일주소 범 위 값을 입력하세요 등록 서비스 차원으로 넣는 옵션들이다. 아 이 디 autofocus 오토포..
html 파일 frame 영역에 불러오기(src), 주석 css 파일 불러오기(link,import) Document 시간표 월 화 수 목 Java 수학 html 영어 국어 JSP 시간표를 만든 태그 파일이 있다. css를 붙여 놓으니 코드가 너무 길어져 css 파일을 따로 만들어서 연결해주려고 한다. practice365.xyz 일반 html 파일 불러오는 방법은 없을까? 있다!! 여기 메뉴의 글씨를 클릭하면 아래 프레임에 홈페이지가 나타나는 페이지가 있다. 영역별로 제작을 하고 main 파일에 불러오고 싶다면 이렇게 해보자! 이런 방법을 사용하면 보기에도 좋고, 영역별로 읽기 쉽다. 메인 파일에서는 위아래로 프레임을 나눴고(frameset), 영역별로 파일을 불러왔다. frame태그에서 src="파일제목" 이 형식은 img 태그에서 그림 불러오기 형식과 같..
클래스 선언과 화면 나누기 머리 인천시청 서울시청 html, body { 마진 패딩을 0으로 선언하면서 간격을 없앰 } height:100% 해주면서 간격 없이 꽉 채움 float:left 왼쪽부터 차례대로 쌓아주는 것 clear:both; float에서 지시한 것을 무시하고 아래쪽에 배치를 한다.

티스토리툴바