날아라쩡글이의 블로그입니다.

Header Left Right Content Footer

position은 엘리먼트의 위치를 설정하는 값이다. position속성을 따로 지정하지 않으면 기본값이 static이다. 블록 엘리먼트는 아래쪽으로 순서대로 배치되고, 인라인 엘리먼트는 오른쪽으로 순서대로 배치된다. 엘리먼트의 위치를 지정할 수 없다. https://lionpower.tistory.com/66?category=903520 css문법 (font나머지~ transition초반) float나머지 요소는 항상 수직으로 쌓이려고한다. float의 경우 수평정렬로 만들어지며, float:right 는 우측부터 3, 2, 1의 형태로 배열되고, float:left의 경우 좌측부터 1, 2, 3의 형태로 쌓이게 된다. 해 lionpower.tistory.com position을 확인하는 것이 더 좋다..

속성선택자 는 브라켓[]으로 설정한다. a[herf] a태그 중에서의 href의 속성을 가지는 엘리먼트를 선택해서 스타일을 적용한다. href을 가지고 있는 속성들은 전부 다 찾아 내기 때문에 따로 a를 작성하지 않고 [herf]으로 표현해도 가능하다. [title='google'] title의 속성이 google인 엘리먼트를 선택해서 스타일을 적용한다. [href^='www'] 앞의 꺽쇠란 시작하는 이라는 의미를 가지고 있다. www으로 시작하는 속성이 선택되게 된다. [href$='kr'] $이란 끝나는 이라는 의미를 가지고 있다. href 속성의 값이 'kr'으로 끝나는 엘리먼트를 선택해서 스타일을 적용한다. [title*='홈페이지'] title속성값에 "홈페이지"라는 텍스트를 포함하고 있는 엘리..

margin은 감싸고 있기 때문에 겹치게 되면 한쪽px로 가게된다. 박스의 형태 정의하기 박스모델 모든 html의 엘리먼트(태그) 박스처럼 다루어진다. 화면 디자인, 화면의 레이아웃을 구성할 때 html의 엘리먼트를 박스처럼 다루게 되는데, 이를 박스모델이라고 한다. 구성 html의 모든 엘리먼트는 margin, border, padding, content로 구성된다. margin 테두리 (border)의 바깥여백, 다른 엘리먼트와의 경계 border 엘리먼트의 테두리, padding 과 contents를 감싸고 있다. padding 테두리와 contents사이의 여백, contents를 감싸고 있다. contents 박스 모델이 가지는 실제 내용 box-sizing이 content-box인 경우 wid..

보호되어 있는 글입니다.

필터선택자 : : 필터 선택자는 중간에 :를 삽입한다. 그리고 몇번째 순서의 선택을 할 것인지 입력을 하면된다. 다른 부분들은 선택자 2를 선택했지만, 필터선택자의 경우 선택자 1중에서 선택자 2를 선택하라라는 의미로 선택자 1을 선택하는 것이라고 볼 수 있다. tbody tr:nth-child(2n) tbody중에서 자손선택자중 tr로 되었고 2의 곱셈행들을 가르킨다. tbody td:last-child tbody중에서 자손선택자중 td로 되어있고, 마지막행들을 가르킨다. li:first-chile li중에서 첫번째 것이 찾아진다. first-chile는 장남을 찾는 것이다. li엘리먼트 중에서 부모 엘리먼트의 첫번째 자식 엘리먼트를 선택하는 것이다. .box:first-child div중에서 1번을 ..

자손, 자식, 동생, 동생들(형제) 선택자 태그 선택자 : 전체적으로 박스를 만들고, 위에, 아래에 따로 따로 값을 설정한다. 자손 선택자 : 공백 공백을 둔다. 선택자와 선택자 상이에 빈 공백이 있으면 첫번째 선택자를 고르고 두번째 선택자를 고른다. 첫번째 선택자 안에 두번째 선택자를 선택한 것이다. 자손1에서 모든 자손2를 선택한다 가장많이 선택하는 선택자이다. 자식 선택자 : > 사이에 > 꺽쇠가 포함된다. 예를 들어 .box-4 > p라면 클래스 box-4 바로 아래의 p를 선택한다고 할 수 있다. 클래스 box-4보다 작은 바로 아래의 p라고 생각하자. > 꺽쇠를 이용해서 바로 아래의 자식을 지정할 수 있다. 하나만 선택하고 싶을때 그것이 바로 자식 선택자이다. 형제들 선택자 동생 선택자 : +..

style 태그 선택자로 스타일 적용하기 태그명안에다가 css를 정의하면 된다. 태그 선택자로 스타일 적용하기 h3{color : red;} p{background-color:yellow;} 아이디 선택자로 스타일 적용하기 # first-message{color:blue; font-weight:bolder;} 클래스 선택자로 스타일 적용하기 . top{font-weight: bolder; color:blue;} 한번에 여러가지 선택자로 스타일 적용하기 태그와 태그 선택하기 h1, h3 {} 태그와 아이디 선택하기 #first-message , p {} 태그와 클래스 선택하기 p, .top {} 클래스와 아이디 선택하기 #first-message, .top {} 무한정 조합이 가능하다. script 선택하..

span 인라인 엘리먼트 텍스트의 일부 혹은 다른 인라인 엘리먼트를 포함하는 컨테이너 엘리먼트 이다. id, class, style 속성이 주로 사용된다. 텍스트의 일부분을 다르게 표시할 때 사용된다. 자바스크립트에서 조작하기 쉽게 하기 위해서 사용한다. 스타일의 일부분을 수정하고 싶을 때 사용하는 것이 span이다. css에 .currency{color:red;} .small-description{font-size: 12px;} .thin-description{font-size: 10px;} .normal-description{font-size: 14px;} 을 입력했다. class의 이름만 위에서 골라서 작성하면 된다.

div 태그 블록 엘리먼트 다른 엘리먼트를 포함하는 컨테이너 엘리먼트 id, class, style 속성이 주로 사용된다. id : 고유한 값 class : 같은 스타일이라는 의미 div를 사용해서 여러 엘리먼트들의 하나의 그룹으로 설정하면 해당그룹의 스타일 적용, 엘리먼트 조작등의 작업을 수행할 수 있게 한다. 해당 부분을 통째로 안보이도록 만들 수 있다. display를 none으로 적용하면 보이지 않게 만들 수 있다. css는 미리 스타일을 정의하고 스타일을 가져다가 붙이는 것이다.

인라인 엘리먼트 필요한 컨텐츠 만큼의 너비를 갖기 때문에 margin과 padding을 이용해서 거리를 조정할 수 있지만, 너비를 갖는 것은 불가능하다. 새로운 줄에서 시작하지 않을 수도 있다. 컨텐츠를 표시하는 데, 필요한 만큼의 너비만 가진다. 인라인 엘리먼트는 블록 엘리먼트로 꼭 감싼다 엘리먼트의 너비 (width)를 지정해도 적용이 되지 않는다. 엘리먼트내의 컨텐츠(자식엘리먼트, 텍스트)를 정렬할 수 없다. 대표적 a 링크를 표현하는 태그 strong, em, small, del, mark, b, i 텍스트를 포맷팅하는 태그 b 와 i는 잘 사용하지 않는다. img 이미지를 표현하는 태그 label, imput, select, textarea, button(form과 관련있는 태그) 폼 입력요소를..

즉 태그 내부에 text로 작성한 것을 엘리먼트 객체가 html을 해석하고 객체를 생성해서 DOM객체가 완성되었다. html에서 DOM은 미리 정해놓은 메소드를 이용하여, 메소드의 이름대로 도큐먼트를 구현한다. 모든 html문서는 모든 브라우져가 통일되어있기 때문에 해석할 수 있다. why? w3c가 Document Interface를 정의해놨기 때문에 오래전에 작성된 문서라서 온갖프로그램에서 가지고 있다. 엘리먼트 p엘리먼트, p태그 처럼 혼용해서 사용할 예정이다. 태그란 text를 적은 것을 의미한다. 엘리먼트는 태그를 표현하는 객체이다. 엘리먼트는 브라우져가 html문서를 해석해서 html Document Object Model 객체를 생성할 때 HTML문서에 포함된 모든 태그마다 하나씩 생성되는 ..

이미지 표시하기 주요 속성 src 페이지에 표시할 이미지 파일의 경로 alt 이미지에 대한 설명을 작성한다. 시각 장애우를 위한 내용으로 tab키로 이동되는 순서와 한 개의 키로 시각장애인이 이용할 수 있도록 웹 접근성 평가를 받는다. 웹 접근성 평가 : 장애인 차별 금지법에 의한 법으로 정해진 웹 페이지를 만들 때 테스트를 받는 평가 방법 공공기관, 포털, 은행기관은 웹 접근성 평가를 받아야 한다. img 태그는 컨텐츠를 가지지 않는 태그이다. 사용방법 닫는 태그는 생략해도 상관없다. 컨텐츠를 따로 갖지 않는다. 그림의 크기는 style로 변경할 수 있다.

텍스트 컨텐츠의 일부분 혹은 전부를 포맷팅할 때 사용하는 태그이다. 텍스트 컨텐츠의 일부분을 다르게 보이게 할 때 사용하는 태그 중요한 텍스트를 담는다. 상품의 이름, 영화의 제목, 책의 제목, 기사의 중요한 키워드 단순 글자를 크게하는 것이 아닌 중요한 텍스트에 붙이는 것이다. 중요한 내용은 강조태그를 이용하여 강조할 수 있다. 태그 대신 사용한다. 강조할 때 사용하는 텍스트 상품의 실제 판매가격 기울이는 것만이 아닌 중요한 부분을 기울이는 것이다. 중요한 text는 묶어놔야 나중에 style을 특별하게 적용할 수 있기 때문이다. 그 부분을 style을 다르게 줄 수 있다. 작게 표시될 텍스트 같은 제목인데도 불구하고 상대적으로 작게 표현되는 것을 의미한다. 삭제된 텍스트 텍스트에 중심선이 간다. 하이..

표를 담는 태그 , , ,,,,,,, table은 표를 담는 태그다. thead는 표의 헤더부를 담는 태그다. tbody는 표의 데이터부를 담는 태그다. 테이블을 구분해놓은 것은 나중에 꾸밀때도 편하기 때문에 구분지어서 작성한다. tfoot는 표의 푸터부를 담는 태그다. tr은 표의 행을 생성하는 태그다. th는 각 항목의 제목을 담는 태그다. td는 각 항목의 데이터를 담는 태그다 colgroup, col은 테이블에 포함된 각 컬럼의 너비를 지정하는 태그다. caption은 표에 대한 설명을 담는 태그다. table > (thead? > tr+ > th+)?, (tbody? > tr+ > (th|td)+), (tfoot? > tr+ > (th|tr)+)? 표기법에 딱 맞는 표기법은 아니다. 전달하기 위..

ALT + SHIFT + 아래화살표 : 복사하기 CTRL+SHIFT+ K :지우기 순서있는 목록을 담는 태그 , ol태그는 li태그를 자식태그로 포함한다. 컨텐츠 --- list_item 순서있는 목록은 데이터가 그렇게 많지 않다. 나중에 JSP에서는 ol사이에 java의 문법을 입력하는 것이다. 들여쓰기는 나중에 전부 조절이 가능하기 때문에 걱정하지 않아도 된다. 랭킹, 음악랭킹 순서 없는 목록 순서없는 목록을 담는 태그 ul태그는 li태그를 자식태그로 포함한다. 순서가 없이 단순 나열된 부분을 작성할 때 사용한다. 숫자나 동그라미가 나타나지 않게 만들어 낼 수 있다. 순서가 중요한 부분들은 ol태그로 순서가 필요없는 부분들은 li태그로 만든다. 뉴스 목록처럼 순서가 없는 것을 담는다. 정의 목록 태그..

웹은 논문의 자료를 공유하기 위해 작성을 했다. 태그는 변수의 타입이다. 논문의 자료를 공유하기 위하여 제목과 본문의 내용을 작성하는 것이다. 영화의 설명, 영화의 줄거리, 상품의 설명, 게시글의 내용을 본문내용이라고 부른다. 본문내용을 담는 태그로 P태그라고 부른다. Paragraph태그 (단란태그) 본문의 내용을 담는 태그를 만든다. p태그는 중복해서 사용하게 될 뎡우 단락을 추가하게 된다. 단락이란 한문단의 단락을 구분하게 만들어 주는 것이다. p태그와 p태그는 단락을 구분짓는 빈 줄이 추가된다. p태그안에서는 줄바꿈은 무시해도된다.

html문서의 문자 인코딩 방식을 UTF-8로 지정한다. 인터넷 익스플로워 브라우져의 호환성을 지정한다, 없어도 된다. 인터넷 익스플로워가 브라우져마다 8, 9, 10 은 호환이 되고 6, 7은 호환이 안될 때가 있었다. 브라우져에서 호환성테스트를 실행해보고 잘나오는 환경으로 호환이 되도록 설정한 것이다. 모바일 장치에서 컨텐츠가 표시될 때 확대/ 축소 지원을 위한 설정을 하는 것이다. 모바일 지원을 하지 않을 꺼면 삭제를 해도 된다. 이것이 설정되어야 디바이스의 컨텐츠를 확대/ 축소할 수 있다. BODY 태그 안에 작성한다. 제목을 담는 태그 H1, H2, H3, H4, H5, H6 숫자가 낮을 수록 더 큰 범위의 제목이다. 제목에서만 사용하는 태그이다. 거의 대부분의 문서에는 제목태그가 존재한다. 공..

WEB이란 어플리케이션이란 WEB브라우져 컨텐츠 service(주문, 정보)를 이용하는 것을 의미한다. 인터넷 기반의 경우 TCP/IP인 연결지향 프로토콜을 이용하여 오류없이 전송하는 것을 의미한다. TCP 패킷을 전송하는 역활 패킷의 순서 알려주는 역활 오류발생을 체크해주는 정보를 포함한다. IP 컴퓨터의 호스트주소를 분석하여 인터넷을 통하여 연결하는 역활을 맡고있다. 인터넷네트워크는 TCP와 IP를 통하여 정말 많은 정보/서비스를 전달하고 있다. HTTP프로토콜 브라우져에서는 웹서버를 연결하기 위해서 어떤 규칙이 있다. (어떻게 전송하는지에 대한 규칙) 모든 웹서버, 웹브라우져가 http로 규정이 된 법칙으로 메세지를 보낸다. 모두가 똑같은 방법으로 제작한다. 어떤 브라우져를 사용하던지, 어떤 웹서버..