본문 바로가기

분류 전체보기313

[CSS] 배경 넣기 & margin collapse 💾 Editor: VSCode 🐥 background-size contain: 세로 고정, 가로로 이미지 반복됨 cover: 이미지를 꽉 채움 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size 🐥 background-repeat no-repeat: 배경 반복 금지 https://developer.mozilla.org/ko/docs/Web/CSS/background-repeat 🐥 background-position (배경 위치 조정) center right left top bottom https://developer.mozilla.org/en-US/docs/Web/CSS/background-position 🐥 background-attac.. 2023. 1. 3.
[부스트코스] 웹 접근성 지침 정리 2 2. 웹 점근성 지침 7) 콘텐츠 간의 구분 이웃한 콘텐츠는 구별될 수 있어야 함 테두리 이용하여 구분 콘텐츠 사이에 시각적인 구분선을 삽입하여 구분 서로 다른 무늬를 이용하여 구분 콘텐츠 배경색 간의 명도대비(채도)를 달리하여 구분 줄 간격 및 글자 간격을 조절하여 구분 기타 콘텐츠를 시각적으로 구분할 수 있는 방법을 통해 구분 8) 키보드 사용 보장 모든 기능은 키보드만으로도 사용할 수 있어야 함 태그 사용시 href 속성 9) 초점 이동 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 함 아래 사용 시 초점이 안 보임. 주의해야 함 hideFocus outline: none onfocus="this.blur();" 10) 조작 가능 사용자 입력 및 컨트롤은 조작 가능하도.. 2023. 1. 2.
[CSS] selector 문법으로 css 코드 양 줄임 💾 Editor: VSCode 👉 참고 이름 날짜 블로그 글 가성비 맛집 발견 float 준 다음에 margin-top이 안 먹힐 경우에는 float 준 요소 다음에 clear:both 넣은 추가함 👉 navbar 만들기 layout1.html (1) 영화 맛집 IT 컴퓨터 대신에 사용. 기능은 똑같음 style.css .navbar li { display: inline-block; } selector 문법 공백: '~안에 있는' 모든 자식 selector 문법 > : '~안에 있는' 직계 자식 layout.html (2) 영화 맛집 IT 컴퓨터 태그 추가. 경로가 지정되지 않았을 경우에는 "#" 이런 형태로 우선 작성 style.css /* 내비게이션 */ .navbar li { display: inl.. 2023. 1. 1.
[CSS] layout 레이아웃 2 - display : inline-block 💾 Editor: VSCode 👉 display block: 한 행을 전부 차지 inline-block: 내 크기만큼 차지 (어울림) index.html 와 사이에 공백이 있으면 안 됨... 와 사이에 주석을 주는 것도 방법 중 하나임 부모 태그에 font-size: 0px; 주는 것도 또 다른 방법임 => 상속 style.css .left-menu { width: 20%; height: 400px; background: cornflowerblue; /* float: left; 추가 */ display: inline-block; /* 추가 */ } .right { width: 80%; height: 400px; background: coral; /* float: left; 추가 */ display: in.. 2022. 12. 31.
[CSS] layout 레이아웃 1 - float 💾 Editor: VSCode 위와 같은 레이아웃을 배치하는 실습 진행. 오른쪽처럼 전체 레이아웃을 감싸는 wrapper(or container) 박스를 만들어두면 좋음. layout1.html .container .container { width: 800px; /* 최대 width를 설정 */ } 전체 레이아웃을 감싸는 wrapper box .header .header { width: 100%; /* 부모 태그의 width의 100% */ height: 100px; background: aquamarine; } width를 100% 주면 부모 태그의 width의 100%를 사용한다는 의미 .left-menu && .right (수정전) .left-menu { width: 20%; height: 400p.. 2022. 12. 30.
[HTML] div 박스 css design (box-shadow) 💾 Editor: VSCode 🔎 div 네모 박스를 넣고 싶다면 'div' 사용 index.html style.css .box { width: 100px; height: 100px; background-color: aqua; } 네모 박스가 하나 추가됨 style.css .box { width: 100px; background-color: cadetblue; margin: 30px; /* 상하좌우 여백 */ padding: 40px; /* 상하좌우 안쪽 여백 */ /* border: 4px solid black; 테두리 */ border-radius: 15px; /* 테두리 둥글게 */ /* 가운데 정렬 */ /* display: block; 생략 가능, div가 박스 특징 */ margin-left:.. 2022. 12. 29.

티스토리툴바