전체 글

1. text 속성 종류 설명 color 글자색지정 text-decoration 텍스트에 밑줄이나 취소선 표시 여부 text-transform 텍스트 전체 또는 첫글자를 대문자로 표시 text-shadow 텍스트에 그림자 추가 text-align 텍스트 정렬 line-height 줄 간격 조정 letter-spacing 글자 사이 간격 조정 2. 박스모델 박스모델에는 블록레벨요소, 인라인레벨 두 가지로 나뉜다. 블록레벨 블록레벨 : 태그를 사용해 요소를 삽입했을때 혼자 한줄차지 (너비가 100%) ex) div태그, p태그 인라인레벨 인라인레벨 : 한줄을 차지 하지 않는다. 콘텐츠 영역 차지하고 나머지 공간에는 다른녀석이 올 수 있다. 한줄에 인라인 레벨 요소를 여러개 표시할 수 있다. 박스모델은 콘텐츠..

저번에 이미지를 누르면 다른 html로 이동하는 a태그를 사용했던 html위에 네비게이션을 만들었다. 네비게이션에 :hover를 이용하여 마우스를 갖다대면 해당 영화 포스터가 나오게 끔 만들었다. 먼저 네비게이션의 틀을 container, navi, ul, li 순으로 만들었다 container 안에 마블스튜디오로 배경을 넣었고 background : cover; 로 다 덮고 크기를 조절했다. 다음은 ul안에 li를 작성하면 글자앞에 ● 기호가 붙어있다. 이를 없애기 위해 list-style:none; 적용 li에 float:left를 적용하여 가로로 1자를 만들어 줬고 position을 통해 포스터가 겹치지 않게끔 자리를 잡아줬다. 다음 a태그를 이용해 네비게이션을 구성했는데 위 같이 누르기전 파랑색,..

위와 같은 포스터를 만들기 위해 배경과 본문으로 나누고 본문을 다시 2개의 영역으로 나눠야 한다. 먼저 본문의 두영역을 나누기 위해 div로 두 영역을 설정한 후 css로 float: left; 를 활용하여 나누었다. 하다보면 그림 밑으로 텍스트가 붙었는데 그림의 크기를 조정하여 텍스트가 정상적으로 오른쪽에 붙도록 했다. 오른쪽 줄거리는 fieldset으로 처리했고 그 아래 사진들은 table을 이용하여 2행4열로 사진을 각각 넣어주었다. 가운데 점선을 표시하기 위해 왼쪽 div태그의 테두리 오른쪽을 점선을 주었다. 본문을 가운데쪽으로 옮기기 위해 body 태그에 margin을 넣어주었다. CSS HTML

1. input 태그 활용 input 태그의 타입에는 여러 종류가 있다. 체크박스의 타입에는 value 값이 무조건 들어가야하고 값은 영문이나 숫자로 입력해야 한다. radio타입에서 둘중 하나만 선택하고 싶다면 name을 똑같이 부여해서 중복으로 값을 선택할수 없도록 하면 된다. button 이나 submit 타입의 글자를 바꾸고 싶다면 value 값에 넣고싶은 문자를 입력하면 된다. number 타입에서 최솟값과 최대값을 지정할 수 있고 이를 가시적으로 표현하려면 range 태그를 이용해도 된다. 날짜나 시간을 지정할 수 있다. autofocus 를 이용하여 페이지를 열면 커서의 위치를 자동으로 조정할수 있다 placeholder로 박스 뒷배경에 글자를 넣을 수 있음 required를 넣으면 필수 값..

1. dl, dt, dd 태그 설명목록 -> 이름(name), 값(value) 설명목록은 이름부분을 지정하는태그 값 부분을 지정하는 태그 태그 사이에는 한쌍의 태그와 태그를 넣는다 2. table 관련 태그 caption태그 : 표제목 위쪽 중앙에 표시된다 -> 표의 제목을 표시 일부 표에서는 제목이 표시된 셀과 자료가 표시된 셀 외에 표 아래쪽이나 합계나 요약 내용을 표시하기도 한다. 제목과 본문, 요약이 있는 부분으로 표의 구조를 나누어 놓는것이 좋다. , , 등 행이나 열을 합치는 속성 rowspan - 행을 합침 colspan - 열을 합침 셀의 내용 셀의 내용 3. 이미지 넣기 GIF : 표시할수 있는 색상수는 최대 256가지. 다른 이미지 포맷 형식에 비해 파일크기가 작아서 아이콘이나 불릿 등..