dion

24.03.11 18일차 목차 1. 시멘틱태그 2. 표를 만드는 태그 3. 위치 속성 1. 시멘틱태그 1. header 2. section 3. aside 4. footer 2. 표를 만드는 태그 table-layout: fixed; : 테이블의 크기를 고정 word-break: break-all; : 셀의 내용이 표에 벗어나지 않도록 설정 vertical-align : 수직정렬 설정(테두리의 넓이와 높이를 정해야 사용할 수 있음) 3. 위치 속성 웹페이지를 작업할 때 각요소의 위치를 2가지 방법으로 설정합니다. 이전작업에서는 태그의 x좌표와 y좌표를 직접적으로 설정한 것이 없으며 상대위치좌표를 이용해 HTML 페이지를 작업했습니다. 이번에는 절대위치 좌표를 이용해 작업하는 방법을 알아보겠습니다. 상대위..

IT/CSS3 2024. 3. 11. 17:54

24.03.08 17일차 목차 1. 반응형웹구조

IT/HTML 2024. 3. 8. 17:49

24.03.08 17일차 1. 레이어 2. 선택자 3. DOM 태그를 객체로 4. 외부스타일 시트 1. 레이어 position: absolute; : 시작점의 절대위치 레이어 안에 사진 삽입 background-size: 100% 100%; : 레이어의 사이즈보다 큰 사진을 잘리지 않게 넣는 명령어 z-index : 겹치기의 높이를 조절 (숫자가 높을 수록 위로 올라옴) 음수는 글자 뒤로 2. 선택자 * : 전체선택자 3. DOM 태그를 객체로 공백 : 부모 밑의 자손들까지 모두 디자인 가능 > : 직계자손만 디자인 가능 4. 외부스타일 시트 미리 파일로 디자인을 만들어 놓고 사용할 때 링크를 걸어줌 5. import @ : CSS 안으로 다른 CSS 파일을 불러들일 경우 (지금은 잘 사용하지 않음)

IT/CSS3 2024. 3. 8. 14:17

24.03.07 16일차 목차 1. 폼 2. label 3. video 1. 폼 중첩 사용 X 1. 로그인과 아이디입력 post : 주소에 노출되지 않기 위해서 사용 2. input 타입 *전송버튼을 누르면 실행되는 action 확인 textarea resize:none; >> 박스창의 크기 조절을 못하게 설정 2. label placeholder : 박스 안에서 미리 입력해야하는 것을 알려주는 기능 required : 값이 비어있으면 경고창을 띄움 *id는 반드시 label명과 동일해야함 autocomplete="on" : 이전에 입력했던 정보를 자동으로 입력 pattern : 지정한 문자패턴(정규식)과 입력된 내용의 일치여부 확인 multiple : 여러개의 파일을 동시에 선택할 수 있는 속성 dia..

IT/HTML 2024. 3. 7. 17:49

24.03.07 16일차 목차 1. 배경이미지다양한색상표현 2. 그레이디언트 효과 3. 글꼴 꾸밈 1. 배경이미지다양한색상표현 1. 바둑판 모양 : 기본으로 배경화면을 설정하면 바둑판모양으로 출력된다 2. 배경화면 반복 중단 3. 이미지 겹치기 4. 배경의 크기 조정 가로반복 스크롤바를 내리면 배경도 같이 내려감 스크롤바를 내려도 배경 고정 스크롤에 따라서 크기가 지정 background-position : 사진 이동 링크에 배경색상 입히기 5. opacity와 alpha값 opacity : 박스전체의 투명도 설정(안개낀 것 처럼 뿌옇게 보이는 것) 다만 rgba 설정은 박스 전체가 아닌 박스에만 투명도가 설정되기 때문에 글자나 테두리는 투명도가 적용되지 않는다 2. 그레이디언트 효과 빛이 들어오는 방향..

카테고리 없음 2024. 3. 7. 14:14

24.03.06 15일차 목차 1. 배치 속성 2. 중첩 박스 3. Box-Sizing 속성 4. 표현 속성 5. 태그선택자 1. 배치 속성 float: left; >> 왼쪽 정렬 float: right; >> 오른쪽 정렬 float: none; >> 정렬하지 않음 * 테두리 border : 굵기 solid(직선) : 2. 중첩 박스 한 페이지에 여러개의 박스가 중첩된 것 2. 부모 박스 여러개의 float 박스들을 묶어서 관리하는 메인 박스 margin: 0 auto >> 가운데 정렬 공간이 모자라면 설정이 틀어짐 * 픽셀 계산법 배너박스 넓이 : 740+2(테두리)+2(테두리)=744 로그인박스 넓이 : 333+8(여백)+2(테두리)+2(테두리)=345 부모박스넓이 : 744+345=1089 부모박스..

IT/CSS3 2024. 3. 6. 17:32

24.03.06 15일차 목차 1. 표작업 1. 표작업 tabld : 감싸는 전체 표 tr : 행(row) td : 열(column) th : 제목 역할을 하는 셀을 정의 thead : 제목 영역 (tabld head) tbody : 본문 영역 (tabld body) tfoot : 요약 영역 (table foot) colgroup : 표는 행만 묶을 수 있기 때문에 열을 묶고싶다면 colgroup을 사용 셀합치기 colspan : 열 합치기 rowspan : 행 합치기 * 열이나 행을 늘릴 때는 다른 열,행들과의 자리도 고려해야한다 caption : 표의 제목 (음성낭독프로그램에서 구분 가능) scope : 열이나 행의 제목 (열의 제목 : th scope="col" / 행의 제목 : th scope="..

IT/HTML 2024. 3. 6. 17:30

14일차 목차 1. CSS 기본 설정 2. 인라인 스타일(inline style) 시트 3. class 4. ID 5. 그룹요소(div, span) https://www.w3schools.com/ W3Schools Online Web Tutorials W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 1. CSS 기본 설정 2. 인라인 스타일(inline style) 시트 ..

IT/CSS3 2024. 3. 5. 16:56