AWESONG_PORTPOLIO

# 자유주제 홈페이지 만들기   *HTMLHTMl MOVIE THEATER TICKET STORE EVENT BENEFIT 개봉예정작 데드풀과 울버린 (DEADPOOL & WOLVERIN) 감독 : 숀 레비 배우 : 라이언 레이놀즈 , 휴 잭맨 , 엠마 코린 장르 : 액션, 코미디, SF 개봉 : 2024.07.24 극장안내 CGV 강남 서울특별시 강남구 역삼동 814..

CLASS_HTML&CSS 2024. 7. 16. 09:29

# flex-box 배치 #opt1 { align-items: flex-start; /*교차축 시작점 기준으로 배치*/ align-items: flex-end; /*교차축 끝점 기준으로 배치*/ align-items: center; /*교차축 중앙 기준으로 배치*/ align-items: stretch; /*교차축 시작과 끝까지 가득 차게 배치*/ align-items: baseline; /*문자 기준선에 맞춰 배치*/ justify-content: center; /*개체를 수직 중앙으로 배치*/ justify-content: flex-start; /*개체를 시작선 기준으로 배치*/ justify-content..

CLASS_HTML&CSS 2024. 7. 12. 17:19

# 트랜지션 속성 transition 요소에 적용할 모든 트랜지션 속성을 지정 property duration timing-function delay transition-property 트랜지션을 적용할 CSS 속성 지정 all, width, opacity ransition-duration 트랜지션의 지속 시간 설정 0.3s, 1s, 1000ms transition-timing-function 트랜지션의 타이밍 함수 설정 ease, linear, ease-in-out transition-delay 트랜지션의 지연 시간 설정 0.2s, 500ms  # transition-timing-function 함수의 기능ease기본값입니다. 천천히 시작하여 중간에 빨라지고 끝에서 천천히 줄어..

CLASS_HTML&CSS 2024. 7. 11. 17:49

# CSS의 선택자 요소 요소 선택자 div 특정 HTML 요소를 선택합니다. 클래스 선택자 .classname 특정 클래스를 가진 요소를 선택합니다. ID 선택자 #idname 특정 ID를 가진 요소를 선택합니다. 그룹화 선택자 h1, h2, h3 여러 요소를 한 번에 선택합니다. 전체 선택자 * 모든 요소를 선택합니다.  #자식요소 선택자 자식 선택자 div > p 특정 요소의 직계 자식 요소를 선택합니다. 하위(후손) 선택자 div p 특정 요소의 하위 요소를 모두 선택합니다. 인접 형제 선택자 div + p 특정 요소의 바로 다음에 위치한 형제 요소를 선택합니다. 일반 형제 선택자 div ~ p 특정 요소의 모든 형제 요소를 선택합니다. 속성 선택자 ..

CLASS_HTML&CSS 2024. 7. 10. 17:37

# 그라데이션 효과linear-gradient(to 방향/각도, 색상 중지점)방향으로 지정하기.grad3 { background: rgb(72, 255, 0); background: linear-gradient(to left top, rgb(247, 0, 255), rgb(26, 171, 255)); } 각도로 지정하기 .grad4 { background: rgb(72, 255, 0); background: linear-gradient(38deg, rgb(47, 68, 255), rgb(0, 255, 115)); }  # 연결 선택자선택자와 선택자를 연결해 적용 대상을 제한컴비네이션 선택자, 조합 선택자 라고도 함 # 하위 선택자부모 요소에 포함 된 모든 하위 요소에 스타일이 ..

CLASS_HTML&CSS 2024. 7. 9. 14:42

# float 속성요소를 왼쪽이나 오른쪽에 떠 있게 만듦# clear 속성float속성을 무효화 시킴 Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua laboris cupidatat anim in non officia aliquip excepteur fugiat labore. Lorem ipsum reprehenderit adipisicing..

CLASS_HTML&CSS 2024. 7. 8. 15:25

#margin & padding 마진 (Margin):마진은 요소의 바깥쪽 공간을 나타냄. 즉, 요소와 주변 요소들 사이의 간격을 조절하는 데 사용. 외부 공간: 요소의 바깥쪽 공간을 설정다른 요소들 사이의 간격: 인접한 요소들 사이의 간격을 조절하여 레이아웃을 조정음수 값 허용: 마진 값에 음수를 사용하여 요소를 겹치게 할 수 있음단위 사용: 주로 픽셀(px), 퍼센트(%), em 등의 단위를 사용하여 크기를 설정.margin-example { margin: 10px; /* 상하좌우 모두에 대해 10px의 마진을 설정 */ margin-left: 20px; /* 좌측에만 20px의 마진을 설정 */ margin: 10px 20px; /* 상하에는 10px, 좌우에는 20px의 마진을 설정 */} ..

CLASS_HTML&CSS 2024. 7. 5. 17:41

# !important  h1 { color: brown !important } 레드향 **태그에 인라인으로 그린컬러가 지정되어있지만 !important로 가장 우선순위 스타일을 지정해주었기 때문에해당 요소에 브라운 컬러가 적용됨  # font 사용하기font모든 font 속성을 이용한 스타일을 한 줄에 설정할 수 있음.font-family텍스트의 글꼴 집합(font family)을 설정함.font-style주로 이탤릭체를 사용하기 위해 사용함.font-variant텍스트에 포함된 영문자 중 소문자만을 작은 대문자(small-caps) 글꼴로 변경시킴.font-weight텍스트를 얼마나 두껍게 표현할지를 설정함.font-size텍스트의 크기를 설정함.  # CSS 스타일 링..

CLASS_HTML&CSS 2024. 7. 4. 17:39