dion

실습1 구조설계 스타일설계 실습2 구조설계 스타일설계 실습3 구조설계 스타일설계 실습4 설계구조 스타일구조 실습5 구조설계 스타일설계 실습6 구조설계 스타일설계 종합 구조설계 1. header(header1,2,3) 2. navigator(navi) 3. content(1,2,3) 4. footer(1,2) 스타일설계

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

24.03.13 20일차 목차 1. display 2. border 3. 그림자속성 4. 벤더 프리픽스 1.display display: inline; : block 타입을 inline으로 지정 inline으로 지정되었기 때문에 style 설정으로 박스 크기를 설정했지만 적용되지 않음 display: inline-block; : 상하좌우 모두 margin과 padding을 적용 가능 diaplay hidden : 통채로 사라짐 visibility hidden : 보이지는 않지만 여백으로 자리를 차지함 2. border 1. 테두리 설정 2. border-radius : 테두리가 둥근 사각형 설정 *사각형의 테두리를 각각 지정할 수 있다(시계방향) 3. 그림자속성 1. text-shadow : 오른쪽 아래..

IT/CSS3 2024. 3. 13. 17:47

24.03.12 19일차 목차 1. 변형속성 - transform 2. 애니메이션 3. 모바일 웹 4. 반응형 웹 1. 변형속성 transform : 각도회전 :hover : 마우스커서를 올릴 때 :active : 마우스를 클릭할 때 transition-duration : 지속시간 설정 transition-delay : 지연시간설정 세로기준 표 가로기준 표 2. 애니메이션 keyframes : 애니메이션을 재생할 각 프레임의 스타일 정의 (0%혹은 from부터 100%혹은 to 까지로 점차 바뀜) animation-interation-count : 애니메이션의 반복횟수 animation-direction : 애니메이션의 진행 방향 설정 alternate : 순방향 진행 후 역방향 진행 animation-..

IT/CSS3 2024. 3. 12. 17:47

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. 레이어 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.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

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