728x90 반응형 분류 전체보기390 [SASS] aside 메뉴 만들기 ( position 사용 ) 디폴트 값 position: fixed; top: 0; /* 최상단에 위치하도록 설정 */ left: 0; /* 왼쪽에 위치하도록 설정 */top: 0과 left: 0을 추가하여 항상 화면의 최상단에 고정되도록 합니다= 위치를 지정해줘야함. position: fixed로 고정하는 이유position: fixed;를 사용하면 요소가 뷰포트(화면)의 상단을 기준으로 고정됨.position: relative로 하면 왜 상단고정이 안되는 이유 position: relative;로 설정하면,요소는 자신의 원래 위치를 기준으로 상대적으로 위치가 조정됨. 따라서 top: 0;을 사용하면 원래 위치에서 상단에 고정되지 않고 그 자리에서 이동. 2024. 6. 23. [CSS] padding 축약 설정 padding 축약 속성은 1~4개의 값을 가질 수 있다.1개 값: 모든 방향의 패딩이 동일합니다.padding: 20px;/* padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; */ 2개 값: 첫 번째 값은 상하 패딩, 두 번째 값은 좌우 패딩입니다.padding: 20px 10px;/* padding-top: 20px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; */ 3개 값: 첫 번째 값은 상단 패딩, 두 번째 값은 좌우 패딩, 세 번째 값은 하단 패딩입니다.padding: 20px 10px 30px;/* padding-top: 20p.. 2024. 6. 23. [SASS] 로고와 메뉴바 위치 지정하기 (display:flex) 양 사이드로 각각 배치하기.scss.banner-header { display: flex; align-items: center; position: relative; width: 100%; justify-content: space-between; padding: 27px; .hamburger_menu { width: 80px; // span 태그에 스타일 적용 span { display: block; height: 10px; background-color: $main_color; margin: 15px 0; transition: all 0.3s ease; border-radius: 10px; &:first-child.. 2024. 6. 21. [SCSS] span 태그로 햄버거 메뉴 만들기 HTML span 으로 햄버거 모양 만들기SCSS.banner-header { display: flex; align-items: center; position: relative; width: 100%; .hamburger_menu { width: 80px;// span태그에 magin을 줘서 높이 맞춰줘서 height를 굳이 쓰지 않음.// width를 부여해서 메뉴 바의 가로 길이 지정 // span 태그에 스타일 적용 span { display: block; //display: block을 사용하면 블록 요소로 변환되어, 각각의 span이 새로운 줄에서 시작 height:.. 2024. 6. 21. [SASS] 태그 중첩 사용 HTML 햄버거 메뉴 만들기에서span 태그에 css 넣고 싶을 경우SCSS.banner-header { display: flex; align-items: center; position: relative; width: 100%; height: 90px; .hamburger_menu { width: 80px; height: 65px; // span 태그에 스타일 적용 span { display: block; height: 10px; background-color: $main_color; margin: 15px 0; transition: .. 2024. 6. 21. [SASS] 상단 메뉴바 생성과 position 이해 ( X버튼 추가 ) HTML 🌸카카오톡 채널 추가 시 3천원 쿠폰 즉시 발급🌸 X 닫기 버튼인 X 버튼도 추가해줌. ( 나중에 자바스크립트로 닫기 해 줄 버튼 )position: absolute를 사용하여 close 버튼을 배치@use "reset";/* 색상 변수 */$main_color: #f5e44f;$sub_color: #e33258;/* header */.banner-top { background-color: $main_color; width: 100%; padding: 11px; text-align: center; font-size: 12px; display: block; // 나중에 자바스크립트로 건들.. 2024. 6. 19. [SASS] _reset 파일과 SASS 문법 reset 파일 - 후에 @use 로 임포트 해줌.- 파일이름은 _reset.scss 으로 생성./* CSS - 기본 설정 */* { margin: 0; padding: 0; box-sizing: border-box; position: relative; // pointer-events: none; text-decoration: none; list-style: none;}html { font-size: 16px;}a,a:link,a:visited { color: inherit; //하단 밑줄 색깔 없애기}전체에 position:relative 를 준 경우 주의 사항 전체 요소에 position: relative를 적용하는 접근은 일반적으로 권장되지 않음.필요한 요소에만 position: r.. 2024. 6. 19. [SASS] 상단 바 만들기 HTML 🌸카카오톡 채널 추가 시 3천원 쿠폰 즉시 발급🌸 전체 감싸는 div = wrapper header 안에 들어 갈 것div .banner-top ( 문구 ) 뿐만 아니라 X 버튼 div 도 추가해줄 예정.SASS@use "reset";/* 색상 변수 */$main_color: #f5e44f;$sub_color: #e33258;/* header */.banner-top { background-color: $main_color; width: 100%; padding: 11px; text-align: center; font-size: 12px;}가운데 정렬을 하기 위해서text-align: cent.. 2024. 6. 18. [CSS] Pseudo, 이벤트 정리 Pseudo Class Pseudo Class - 가상 클래스: hover 할 때 , : ( 콜론) 이 하나 들어가는 것들을 CSS의 가상 클래스 라고 함.:active= 사용자에 의해 엘리먼트가 활성화 됐을 때( 마우스를 누르는 중일 때 ):hover= 사용자의 커서가 엘리먼트 위에 있을 때( 마우스가 올라가 있을 때):target= 상호작용된 요소가 가리킨 URL과target 요소가 일치할 때 사용되는 가상 class:any-link= link / visited 이 두개를 포괄하는 가상 class= 방문 여부와 관계없이 링크가 걸린 요소 전부의 style 적용 가능:checked= 대상 체크박스가 체크됐을 때:focus= 대상 요소가 활성화됐거나 된 직후일 때:focus-within= label/fo.. 2024. 6. 17. 이전 1 2 3 4 ··· 44 다음 728x90 반응형
