공부방

이어서 선택자의 종류를 계속 알아보자 6. 링크 선택자. (가상 선택자) 태그를 사용할 경우에 이 링크를 클릭하거나, 커서를 올리는 등의 이벤트 마다 스타일을 다르게 지정할 수 있는데 이 때 설정하는 선택자들이다. :link - 기본값. 링크 상태를 나타냄 :visited - 방문한 곳을 구별할 수 있음 :hover - 커서를 올렸을 때 :active - 클릭했을 때 (클릭시부터 떼는 순간까지) :forcus - 클릭했을 때 (클릭을 떼도 남아있음) Nothing W3C h1 a{ text-decoration: none; } h1 a:visited{ color: seagreen; } h1 a:hover{ background-color: sienna; } h1 a:active{ color: yellow; ..

CSS 스타일에서 선택자에 대해 알아보도록 하자 1. 전체선택자. *{ margin : 0; padding : 0; } 전체 스타일을 적용시키는 항목이다. 일반적으로 margin과 padding 을 0으로 설정한다. 2. 후손 및 자식선택자 - 후손 : 공백으로 구분하며 하위의 모든 태그를 선택 - 자식 : 꺽쇠(>) 로 구분하며 하위중 자식 태그만 선택. ... ... Lorem Ipsum1 Lorem Ipsum2 Navigation Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum2 Navigation Navigation2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lo..

삼성생명의 홈페이지를 만드는 연습을 해보자. 먼저 홈페이지를 3등분하여 헤더부분, 메인부분, 하부부분으로 나눈다 태그를 이용하여 3개의 부분으로 나누었다. 먼저 헤더부분을 보도록 하자 헤더의 각 부분들을 클릭했을때 홈페이지로 이동 또는 세부 내용이 나오는 화면으로 이동해야 하므로 태그를 이용하여 링크를 달아준다. 그리고 삼성생명 소개, 사회공헌, 홍보센터, 투자정보, 채용정보 와 같은 내용은 오른쪽으로 정렬되어 있으므로 블록을 따로 지정하여 "menu"라는 이름의 클래스를 지정해준다. 이후 블록안에 리스트를 만든 후 내용을 넣고 마찬가지로 링크를 달아준다. 다음은 메인부분을 보도록 하자. 메인에 들어가는 내용은 크게 3부분으로 나누어져 있다. 큰 글자 작은글자 블록 으로 구분할 수 있겠다. 큰글자는 태그..

위와같은 회원가입을 위한 페이지를 만들어 보도록 하자. 먼저 태그를 이용하여 전체 내용이 들어갈 블록을 지정한다. 제목인 회원가입은 태그를 이용해서 만들 수 있다 그리고 나서 입력한 정보들을 회원가입 버튼을 통해 전송해야하므로 태그를 만든다. 여기서 aaa.html은 임시로 만들어 놓은 것으로 실제 사용할 때에는 보낼 페이지 url을 넣어 주면 된다. method 속성의 키워드는 get방식과 post방식 2가지가 있는데 get방식을 사용하면 보내는 내용을 url에 표시하게 된다. 태그 안의 태그는 내용들을 꾸밀 css스타일을 적용시키는 태그이다. 태그를 만들고 나면 '필수입력정보' 와 '선택입력정보' 를 입력하기 위한 블록을 따로 지정한다. 여러 방식이 있겠지만 여기서는 태그를 이용하여 2개의 블록을 지..

html 태그에서 또는 태그를 사용하면 박스를 만들 수 있다. 속성으로는 margin : 바깥쪽여백 border : 테두리 padding : 안쪽여백 width, height : 콘텐츠 영역 border : 선 두께, 선 모양, 선 색상 - none : 기본값 선없음 - solid : 실선 - dotted : 점선 - deshed : 바느질선 - double : 이중선(최소3px) box-sizing box-sizing 속성은 다음 키워드 중 하나를 가진다. content-box는 기본 CSS 박스 크기 결정법을 사용한다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해진다. border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 ..

스타일을 적용할 때 우선순위는 *(전체선택자) > 태그 > 클래스 > 아이디 > 인라인스타일 순으로 적용된다. 예시로 스타일 우선순위 라는 태그가 있을 때 위 그림처럼 구분해주면 된다. 스타일이 여러개일때는 브라우저의 기본스타일 > 외부스타일 > 내부스타일 > 인라인 스타일 순으로 적용된다. - 브라우저의 기본스타일 : 등 고유의 스타일 - 외부스타일 : - 내부스타일 : - 인라인스타일 즉 가장 멀리있는 스타일부터 적용 되고 최종적으로 적용되는 스타일은 가장 근접한 위치에서 적용한 스타일이 적용된다고 볼 수 있다. 스타일은 여러 방식으로 적용할 수 있는데 예시를 보면 결과를 보면 li의 첫번째 값인 웹학과의 글자크기가 우측의 css 파일에서는 30px로 설정했지만 태그안에 직접 small속성으로 지정해..

HTML의 각 태그에 스타일을 적용하는 방법에 대해 알아보자. 1. 각 태그에 직접 style 속성 부여하여 스타일 적용. 2. head 태그 안에 style 태그를 미리 설정 3. css파일로 style 만든 후 링크로 연결 4. sytle 태그안에 # 또는 .으로 속성 만든 후 class/ id 속성으로 불러오기 1. 위의 태그처럼 직접 style을 설정하면 된다. 2. 위의 태그를 태그 안에 추가하면 된다. 3. css파일을 새로 만든후 css파일 내에서 스타일을 지정해 둔 뒤, 예시 2의 태그를 이용하여 이 파일을 불러온다. 4.style 태그 안에 . 또는 #으로 자신이 원하는 스타일 모양을 설정해 둔다. 그 후 스타일을 지정할 태그 안에 class 또는 id로 불러오면 된다. # - id : ..

폼태그를 사용하면 사용자의 입력을 받을 수 있다. 태그를 이용하면 버튼, 텍스트입력, 라디오버튼, 체크박스 버튼 등 다양한 속성을 입력받을 수 있고 속성으로 선택지 중 1가지를 선택하는 기능을 넣을 수 있다. 태그는 여러 줄을 입력할 수 있는 텍스트박스를 생성하는 기능이다. 여기서 input 타입의 submit 속성은 입력받은 정보들을 action에서 설정한 url로 보내는 기능을 하고 reset 속성은 말 그대로 리셋하는 기능이다. 각 태그에 속성으로 name 과 value값은 각각 변수와 변수에 저장된 값이라 생각하면 되겠다. 다만 button, submit, reset의 속성에서 value는 버튼안에 들어갈 말을 지정해 주는 것이라 생각하면 된다. select태그에서 selected 속성은 초기값으..

이미지를 삽입할 때에는 이미지가 저장된 경로를 알고 있어야 한다. 태그로 이미지를 삽입할 수 있다. 이 때 이 이미지는 글자로 취급하므로 줄바꿈태그인 을 넣지않으면 위와같이 그림 바로 옆에 글자가 들어가는 것을 볼 수 있다. 따라서 그림을 넣은 후에 태그를 넣어주는 것이 깔끔하다. 그림의 위치는 align 속성으로 조절 할 수 있다. align = right : 텍스트 오른쪽에 정렬 align = left : 텍스트 왼쪽에 정렬 위 속성은 텍스트 기준으로 배치하는 것이므로 그림의 왼쪽 또는 오른쪽에 텍스트가 위치하게 된다. width 속성과 height 속성으로 가로 크기와 세로 크기를 지정할 수 있다. border속성은 테두리 두께를 픽셀 단위로 지정하는 속성이다. 링크를 가진 이미지의 경우 자동으로 ..

HTML의 기본 구성은 시작 태그와 종료 태그로 구성되어 있다. 태그는 (꺾쇠)기호로 둘러싸인 키워드이다. 기본적인 형태를 보면 제목 내용 처럼 되어 있다. 처럼 시작과 종료태그가 따로 없는 것도 있다. : 줄바꾸기 ... : 문단 나누기 ... : 자주 사용되지는 않지만, 입력한 모습 그대로 출력해준다. (줄바꿈, 여러칸의 공백 등) ... : 글자 크기 조절 ... : 굵은글자 ... : 굵은글자2 ... : 이탤릭체 ... : 이탤릭체2 ... : 윗첨자 (제곱수 등 표시) ... : 아래첨자 (원소 등) ... : 밑줄표시 ... : 따옴표 ... : 따옴표 .... : 형광펜효과 ... : 폰트 크기와 컬러를 지정할 수 있다. ... : Ordered List 순서가 있는 리스트. 리..