본문 바로가기

🌌 | WEB DEV/HTML CSS24

PoeimaWeb) HTML5_2~3(기본문법, 시멘틱, 검색엔진) 출처https://poiemaweb.com/1. HTML5HyperText Markup Language는 웹페이지를 기술하기 위한 Markup 언어이다.내용, 구조를 담당하는 언어로 HTML 태그를 통해 정보를 구조화할 수 있다.HTML5는 2014년 10월 28일에 확정된 차세대 웹 표준이며 아래의 기능이 추가되었다.기능설명멀티미디어별도의 플러그인 없이 멀티미디어 기능 자체 지원그래픽2차원 그래픽(SVG, 캔버스), 3차원 그래픽(CSS, WebGL) 지원통신서버와의 소켓 통신 지원으로 서버와의 양방향 통신가능디바이스 접근카메라, 동작 센서 등 하드웨어 기능 직접 제어 가능오프라인 및 저장소오프라인에서도 애플리케이션 동작 가능(HTML5가 플랫폼 사용될 수 있음 의미)Semantics 태그요소의 의미를.. 2024. 6. 16.

CSS_flex(2) 들어가기에 앞서 flexbox를 다루기 위해서 축의 개념을 알아보면, 주축, 교차축이 있다. 주축 = 가로정렬->가로축, 세로정렬->세로축 교차축 = 주축의 수직 위의 축은 flex-direction으로 지정할 수 있는데 가로 : row, row-reverse 세로 : column, column-reverse 위와 같은 값을 넣어주면 된다. 이 축의 개념은 요소를 정렬할 때 필수적인 개념이다! flexbox에는 부모요소인 flex container 자식요소인 flex items 로 구성이 되어있다. 또한 이에따라 적용할 수 있는 속성도 다르다! 참고자료 ↓ (https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concep.. 2022. 1. 30.

CSS_flexbox(1) 수평정렬 flexbox 부모요소 내의 자식요소들에 대한 공간 배분, 정렬을 할 수 있는 모델이다! css에서 레이아웃을 구성할 때 float을 이용하였지만 최근에는 flex를 점점 많이 사용하는 추세이다. 사실 호환성문제로 사용 수가 적었는데 많이 해결이 되었다고 한다. 수평정렬 다른 방법들과의 비교 먼저 기존에 다뤘던 것들을 살펴보자! 1. float item1 item2 item3 .container{ width: 400px; border: 1px solid #000; /* overflow: hidden; */ /*이 속성을 이용해도 된다.*/ } .item { width: 100px; height: 100px; border: 1px solid #000; background: gold; border-radiu.. 2022. 1. 30.

HTML & CSS 활용 프로젝트_ 카드셔플 & 디스펜싱 코드 .container{ width: 500px; height: 500px; border: 1px solid #000; position: relative; } .box{ width: 100px; height: 130px; border: 1px solid #000; border-radius: 5px; position: absolute; top: 35%; left: 40%; } .btn{ width: 50px; height: 50px; border: 1px solid #000; } .box1{ background: crimson; z-index: 1; } .box2{ background: darkorange; z-index: 0; } .box3{ background:gold; z-index: 0; } .b.. 2022. 1. 28.

CSS _transition(2) (timing-function) 저번에 이어서 transition 두 번째 timing-function을 알아보았다. timing-function 전환효과의 시간당 속도를 조정한다. 값의 종류 1. ease : 기본값 / 점점 속도가 증가하다가 느려짐 2. linear : 똑같은 속도로 끝까지 3. ease-in : 천천히 시작하여 끝날때까지 빨라짐 4. ease-out : 빠르게 시작해서 느려지며 끝 5. ease-in-out : 천천히 시작해서 빨라졌다가 다시 느려짐 6. steps(단계 수, jump-term) 7. step-start : steps(1, start)와 동일 8. step-end : steps(1, end)와 동일 9. cubic-bezier(p1, p2, p3, p4) : 베지어 곡선 1~5까지 모두 베지어 곡선.. 2022. 1. 14.

CSS _transition(1) (property, timing, delay) 저번에 css가상클래스 hover를 알아볼 때 잠시 다뤘던 transition에 대해서 좀 더 공부해보았다. transition = 변경 이다. 따라서 요소의 상태 변화를 다룰 수 있는데 transition은 단축 속성이고 property, duration, delay, timing-function 이렇게 4가지가 있다. 각각을 간단히 알아보면 1. property : 변화를 적용시킬 CSS 속성 지정 2. duration : 변화시간 지정 3. delay : 지연 시간 지정 (시간 지난 후 시작) 4. timing-function : 변화되는 과정 중 속도 지정 property & duration div:hover { transition-property: width; transition-duration.. 2022. 1. 14.

CSS의 크기단위들!(px, em, rem, vw 등) CSS의 다양한 단위들에 대해서 알아보자! 그 중에서도 주로 사용하는 것들을 정리해보았다. 우선 2종류로 나눌 수 있다. 절대 단위 고유한 크기를 갖는다. 즉, 타 요소에 영향 받지 않는다. 종류 px : 픽셀 / 컴퓨터 이미지, 디스플레이를 구성하고 있는 최소 단위 상대 단위 요소에 지정된 크기(상속된 크기값 or 기본 크기값)에 대한 상대적인 크기를 갖는다. 반응형 웹등 상황에 맞추어 변해야하는 경우 활용한다. 종류 % : 퍼센트 / 상대 비율 em : 배수 / 상속에 따라서 값이 계속 변한다. (중첩이 됨) rem : 최상위 요소에 대한 배수 / em과 다르게 절대적 기준이 있어 다른 값을 가리키지 않는다. (16px이 기본 설정이므로 아무 설정없이하면 16px적용!) em vs rem 예시 1. .. 2022. 1. 9.

CSS 가상클래스 (3)_순서 가상클래스[2] (first-child, last-child) 저번시간에 이어서 순서부여 가상클래스! 순서부여 가상클래스는html에 따로 클래스를 부여하지 않아도 원하는 요소 접근할 수 있도록 하기 위해서 사용한다. first-child 해당 선택자의 가장 첫 번째 요소 last-child 해당 선택자의 가장 마지막 요소 당연하지만 nth-child와 달리 순서를 뜻하는 숫자는 필요하지 않다. 예시 공지사항 갤러리 2022 신년인사 수강신청 방법 안내 장학금 신청기간 안내 복학 신청 안내 동계 방학 기간중 도서관 운영 안내 전체 CSS코드 .tab-inner { width: 400px; } .btn span { background-color: #ccc; display: inline-block; width: 120px; padding: 5px; font-weight:.. 2022. 1. 7.

CSS 가상클래스 (2)_순서 가상클래스[1] (nth-child, nth-of-type) 이번에는 순서를 부여하는 가상클래스를 알아보았다. nth-child nth-child는 순서를 부여하는 가상클래스이다. (가장 대표적인 순서부여 가상클래스) 사용법 선택자:nth-child(순서) (띄어쓰기는 역시 X) 예시 .box { border: 5px solid #000; width: 1000px; text-align: center; } .box div { border: 5px solid #000; margin: 10px; width: 200px; height: 200px; display: inline-block; } 위와 같이 부모요소인 'box'클래스에 4개의 자식요소가 있다. 이 4개의 요소에 순서를 부여해보면 .box div:nth-child(1) { background-color: dod.. 2022. 1. 7.

이전 1 2 3 다음

티스토리툴바