웹개발/HTML+CSS 썸네일형 리스트형 [HTML+CSS] margin, padding 속성 비교 margin : 요소의 네방향(위아래왼쪽오른쪽) 바깥 여백 영역을 설정하는 요소 margin-top, margin-right, margin-bottom, margin-left padding : 요소의 네방향(위아래왼쪽오른쪽) 안쪽 여백 영역을 설정하는 요소 padding-top, padding-right, padding-bottom, padding-left margin은 요소의 주위에 빈 공간을 추가, padding은 요소의 내부에 빈 공간을 만듬 예제 html text-1 text-2 css 결과 green 색상이 margin 네방향 10px 설정한것, orange 색상이 padding 네방향 10px 설정한 것이다. green 색상은 네방향 10px 씩 바깥여백이 생겨서 그림과 같이 바깥여백이 생긴 .. 더보기 HTML 레이아웃 구조 만들기(웹디자인기능사 실기 예시) 오늘 만들 레이아웃 구조 1. html 구조 틀 잡기 2. css 초기화 clearfix : 자식을 float 적용하면 부모가 자식을 감싸지않기때문에 부모 높이가 0이 되버린다. clearfix는 0이 된 부모 높이를 되찾아주는 역할 3. wrap margin: 0 auto -> 가운데 정렬 4. header 결과 5. imgSlide 결과 6. contents 결과 7. footer 최종결과 더보기 HTML 폼양식, <input>, <select>, <textarea>, <button> 텍스트창과 비밀번호 입력창 id : pw : 라디오 버튼, 체크 박스 라디오버튼 : 선택 선택안함 취미 : 독서 운동 공부 checked 속성을 넣으면 처음부터 선택된 항목으로 표시된다. 라디오버튼은 여러 항목 중 하나만 선택할때 사용함 체크박스는 여러 항목을 선택할 때 사용함 파일 선택 창 파일 첨부 : 선택 박스 이메일 : @ 선택 네이버 다음 구글 다중 입력 창 다중 입력 창 rows : 행을 지정하는 속성, rows=5이므로 다섯줄을 입력할 수 있는 크기로 설정됨. cols : 한 줄에 입력 가능한 글자 수, 즉 너비를 의미하며 cols=60이므로 60자까지 영문자나 숫자를 입력할 수 있음. 한글은 한 글자가 영문자 두 자리를 차지하므로 한글만 쓸 경우 30자까지 입력할 수 있음 버튼 확인 취소 .. 더보기 HTML 테이블 삽입하기, <table>, <th>, <tr>, <td>, collapse 오늘은 html과 css를 이용해서 테이블을 만들어보겠습니다. 셀 제목1 셀 제목2 셀 제목3 셀 내용1 셀 내용1 셀 내용1 셀 내용2 셀 내용2 셀 내용2 셀 내용3 셀 내용3 셀 내용3 태그와 , , 태그를 이용해서 테이블을 만들었습니다. 하나의 행 테이블 각 열의 제목 각각의 셀 결과 화면입니다. 아직 로 글만 썼기에 글자만 나옵니다. 이제 css를 이용해서 테이블 테두리를 만들어보겠습니다. css는 스타일시트이며 body부분을 꾸며주는 역할을 합니다. 사이에 을 넣어 씁니다. 실행 결과입니다. 테두리 사이의 간격을 없애 단선이 되었습니다. 더보기 HTML 하이퍼링크 삽입, <a> 태그 속성 태그는 하이퍼링크를 걸어주는 태그입니다. 링크는 모든 브라우저에서 다음과 같이 표시됩니다. - 방문하지 않은 링크는 밑줄과 파란색 - 방문한 링크는 밑줄과 보라색 - 활성 링크는 밑줄과 빨간색 속성 href : 클릭했을 때 이동할 링크 target : 링크를 여는 방법 target 에는 다음과 같은 속성이 쓰입니다. _self 현재 페이지, 기본값으로 생략 가능 _blank 새 탭으로 오픈 _parent 부모 페이지로 오픈 _top 최상위 페이지로 오픈 프레임이름 명시된 프레임에서 오픈 네이버로 이동 예를 들어 다음과 같이 href 에 네이버 주소를 입력하고 target에는 "_blank"를 입력하고 실행한 결과입니다. 방문하지 않아 파란색 밑줄로 네이버로 이동이라는 글자에 하이퍼링크가 걸렸습니다. 클릭.. 더보기 HTML 이미지 삽입하기, <img> 속성 (width, height, src, alt, title) html에서 이미지를 삽입하는 태그인 에 대해 알아보겠습니다. 태그는 웹페이지에 이미지를 삽입할 때 사용합니다. 예를 들어 코드를 입력하면 이미지가 삽입되는 것을 볼 수 있습니다. 에서 src 속성은 source를 의미하며, 이미지 파일의 이름과 경로를 알려줍니다. 만약 이미지 파일이 img 라는 폴더 안에 있다고 가정하면 현재폴더/경로/이미지파일이름.확장자 ./img/banner01.jpg 이렇게 입력하셔야 합니다. .(점)은 현재 폴더를 의미하며 /(슬래시)는 폴더를 구분해주는 기호입니다. ./ 은 생략하여 "img/banner01.jpg" 로 입력하셔도 됩니다. 태그 속성 1. width, height 속성 이미지의 너비와 높이를 지정해주는 width와 height 속성에 대해 알아보겠습니다. 는 .. 더보기 이전 1 다음
