목록WebFront_ (40)
YJ의 새벽
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cMb0O2/btrX2WFAofS/d5welFfKp9NFXzIYQS8ys1/img.png)
Display ***display 속성 : 화면에 어떻게 보일지. none : 보이지않음 --요소를 렌더링 하지않도록 설정, visibility 속성을 hidden 으로 설정한과 달리, 영역도 차지하지않음. block : 블록박스 (한줄형식) -- div , p , h , li 등이 해당. -- 기본적으로 가로영역을 모두 채움. -- width , height 속성을 지정할수있음 . inline : 인라인박스 inline-block : block과 inline의 중간 형태 ***프레임이란 ? 현재 화면을 가르키는 용어 _blank : 새로운 탭에서 오픈함. _self : 현재 프레임으로 오픈함 _parent : 현재 프레임의 부모 프레임에서 오픈함 _top : 현재 윈도우 전체에서 오픈함 프레임이름 : ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/QXclL/btrX1OgEGCb/rQ8Snki8sFp6XIRqfmBTY0/img.png)
태그 -- 태그는 레이아웃을 나누는데 주로 쓰임. -- div요소는 다른 적절한 요소가 없는 경우 마지막방편으로 사용하기를 강력히 권장. -- 웹문서의 특정한 구역을 설정하기위해 사용. ( 웹문서의 특정 위치에 글이나 이미지를 적을 수 있는 네모칸을 만들어놓은것 ) -- 태그 속성 - id : 자바스크립트에서 호출하기 위한 이름 지정 - style : 스타일지정 / 항목과 값은 : 로 구분. 항목간은 ; 로 구분. -width(가로) heigt(세로) 속성 사용가능. -Position:absolute -> 웹문서 자체가 div의 위치기준이 된다. -Position:relative -> div태그가 속한 테이블이나, 상위div태그 처럼 상위태그가 위치기준이 된다. -top, bottom , left , r..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/RjKy6/btrXUSqKiWS/eDkctQbzQD7KHgjq8Mb7Q1/img.png)
*** CSS 박스 모델이란 ? --웹페이지상 모든 엘리먼트(태그)는 하나의 박스의 개념으로 표현. --CSS 의 근간이 되기때문에 반드시 이해하고 있어야 함. --웹페이지에 배치하는 모든 HTML 태그 는 3개의 층을 가진 사각형 구조의 형태 EX))) 박스모델 예제 (border) p태그 영역 h1태그 영역 border2아이디 사용 margin --박스의 경계선과 경계선 외부에 존재하는 요소 사이의 여백 설정 EX ))) margin 예제 p태그 영역 h1태그 영역 border2아이디 사용 EX))) margin 예제2 h1 태그
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/zLGp4/btrXVqG4VRS/f6wiy7TdSOvgtAhVOwnoA0/img.png)
**CSS 란 ? -- Cascading Style Sheets 의 약자. -- HTML 요소(태그) 들이 각종미디어에서 어떻게 보이는가 정의하는데 사용되는 스타일시트언어 -- HTML4 부터는 이러한 모든 서식설정을 HTML 문서로부터 따로 분리하는것이 가능 - 외부파일인 확장자가 CSS인 파일을 생성하여 사용가능. - HTML 내부에서 스타일 정의도 가능. **CSS 사용하는 이유 ? --HTML 만으로 웹 페이지를 제작할경우 HTML 요소의 세부스타일을 일일이 따로 지정해주어야함. - 매우많은시간이 걸리며 , 완성한후에도 유지보수가 힘듬. - 문제점을 해결하기위해 W3C (World WIde Web Consortium) 에서 CSS를만듬. -- CSS는 웹 페이지의 스타일을 별도의 파일 (.css)..
태그 : 테이블 전체를 만들때 사용 : 테이블의 행을 구분지어준다. : 테이블의 열을 작성한다. ( 태그 하위에 위치 ) : 테이블 행의 맨위, 목록. () 들어가있음, 가운데정렬 (테이블헤더) : 테이블제목. ** 태그에 들어갈 속성 : 셀의 가로폭 설정 : 셀의 세로폭 설정 : 셀의 컨텐츠(텍스트,이미지) 를 가로정렬 ( left ,right , center ) : 셀의 컨텐츠(텍스트,이미지) 를 세로정렬 ( top ,middle, bottom ) EX ))) 오늘의 수..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cLkIce/btrXM4xMxqm/jXUq0c2s4KwlKlKDn1yM1k/img.png)
--무료이미지 다운사이트 --픽사베이 사용. HTML 삽입 미리보기할 수 없는 소스 --웹브라우저별로 지원하는 이미지파일 형식이 다름, HTML 삽입 미리보기할 수 없는 소스 --저작권없는 무료음원 다운사이트 HTML 삽입 미리보기할 수 없는 소스 --저작권없는 무료동영상 다운사이트 HTML 삽입 미리보기할 수 없는 소스 태그 -- 요소에는 src 속성과 alt 속성(선택)을 반드시 명시해야함. ex) src : 삽입하는 이미지파일의 이름(경로) 지정 width : 이미지 가로 height : 이미지 세로 title : 마우스포인터 갖다댔을때 나타나는 이미지설명 E..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cgSZXR/btrXwjbNZMV/aEW8gK0Wez05ibLipct9BK/img.png)
******태그모음 사이트 https://www.tcpschool.com/html-tags/ol HTML **HTML ? (HyperText Markup Language ) : 확장자 : .html .htm --문법 :: //시작태그 //종료태그 --주석처리 : --태그에 따라 시작태그만 있고 종료태그가 없는 태그도 존재한다. -- , , 등과같이 종료태그없고 시작태그만 가지는 태그를 ' 빈 태그 '(empty tag) 라고 한다. html 요소구조 --html 요소(element)는 여러 속성(Attribute)을 가질수 있으며 --> 요소: 태그이름 --속성은 html 요소중 언제나 시작태그 내에서만 정의되며, 속성이름과 속성값으로 표현. 문법 : < 태그이름 속성이름 = "속성값"..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/calhev/btrXFvQzsgy/3l2v9Ke8b6cshrrPm7ux4k/img.png)
**웹 이란 ? (WWW : World Wide Web) --인터넷,컴퓨터,웹브라우저를 통해 글자,이미지,동영상,음성 등의 데이터를 사용자에게 제공하거나 , 사용자와 컴퓨터 또는 사용자 상호간 소통하게 해주는 서비스. ------------------------------------------------------------------------------------------------- --visual studio code 설치 . 1. 작업폴더 만들기 -- 파일(File) 메뉴 > 폴더열기 > 작업폴더열기 ( css,html,js 3폴더의 상위폴더 ) 2. 파일 생성하기 -- 파일 메뉴 > 새파일 3. 파일안에 명령어 입력 4. 파일 실행하기 1) 웹브라우저 실행 2) 파일을 웹브라우저로 드래그앤 ..