# htmlcss

408개의 포스트
post-thumbnail

HTML/CSS 스크롤바 숨기기 없애기

스크롤은 동작하되 스크롤 숨기기

5일 전
·
0개의 댓글
·

Chapter07. 쇼핑몰 웹사이트 만들기

완성된 웹사이트https://chapter07.jaeyounging.repl.co/미디어 쿼리는 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입(media type)과 적어도 하나 이상의 표현식(expression)으로 구성됩니다.

2022년 8월 1일
·
0개의 댓글
·

07/27(수) ☀️ SCSS

2022년 7월 27일
·
0개의 댓글
·

Box Model

모든 HTML 요소는 Box 형태의 영역을 가지고 있다.이 Box는 콘텐츠(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 구성된다.브라우저는 박스 모델의 크기(dimension)와 프로퍼티(색, 배경, 모양 등), 위치를 근거로

2022년 7월 26일
·
0개의 댓글
·

7/26(화) ☀️ SCSS

🔥 scss 🌟 @use 임포트파일 as 사용할 이름 🌟 @forward _index.scss 내부에 같은 디렉토리 안의 scss들을 forward로 내보내기 🌟 @function @return 으로 반환 🌟 @sass:math math.div(분자, 분모) 🌟 연산 결과 곱하기는 둘 중 하나가 단위가 없어야 계산된다. 나누기 => 단위...

2022년 7월 26일
·
0개의 댓글
·

Position

position 프로퍼티는 요소의 위치를 정의한다. top, bottom, left, right 프로퍼티와 함께 사용하여 위치를 지정한다.static은 position 프로퍼티의 기본값으로 position 프로퍼티를 지정하지 않았을 때와 같다.기본적인 요소의 배치 순서

2022년 7월 25일
·
0개의 댓글
·

7/25(월) ☀️ SCSS

실행 명령을 다른 명령에 -- 로 구분하여 재할당 가능css 이전의 코드 ( css로 컴파일 )css만으로 할 수 없는 것을 자바스크립트 기반 플러그인으로 가능하게 해줌( 아직 도입되지 않은 미래의 것들(예 : CSS Nesting Module)을 당장 사용할 수 있게

2022년 7월 25일
·
0개의 댓글
·

Float

float float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. felxbox 레이아웃을 사용한다면 더욱 간단하게 정렬을 구현할 수도 있지만 flexbox 레이아웃을 지원하지 않는 IE를 고려해야 한다면 f

2022년 7월 22일
·
0개의 댓글
·

7/22(금) 🌤 HTML/CSS 반응형

🔥 CSS 🌟 사용자 정의 속성 ( data 접근 ) 요소가 가진 상용자 정의 속성을 뽑아 사용할 수 있다. 🌟 shape-outside 속성 이미지의 주변 텍스트가 흐르게 배치하는 속성 CSS Shapes

2022년 7월 22일
·
0개의 댓글
·
post-thumbnail

7/21(목) 🌧 HTML/CSS 반응형

🔥 HTML 🌟 🌟 🌟 🌟 🌟 🔥 CSS 🌟 🌟 🌟 🌟 🌟 🔥 Git 🔥

2022년 7월 21일
·
0개의 댓글
·

Chapter06. 반응형 웹사이트 Bootstrap

부트스트랩 주소: https://getbootstrap.com/docs/5.1/layout/grid/ 웹사이트를 격자무늬로 나누어서 보고 요소를 배치하는 기술화면 사이즈에 따라 격자구조를 바꿀 수 있다 Grid는 한줄을 12개의 컬럼으로 나눈다. 줄을 나타내는

2022년 7월 21일
·
0개의 댓글
·

Chapter05. Spotify 웹사이트 만들기

오늘은 Spotify 웹페이지를 html/css를 사용하여 만들어 보겠다.일단 Spotify 웹페이지는 다음과 같다.https://www.spotify.com/kr-ko/https://replit.com/@Jaeyounging

2022년 7월 21일
·
0개의 댓글
·

7/20(수) 🌤 HTML/CSS 반응형

footer 영역의 연락처 마크업에 사용 (본문 x)mailto:email 프로토콜을 이용해 메일 프로그램 실행해준다.tel:010-1111-1111 (모바일) 전화 연결콘텐트에 들어갈 수 있는 다른 속성 값이 뭐가 있는지 찾아보기미리 변화를 알려주어 계산하기

2022년 7월 20일
·
0개의 댓글
·

7/20 - 모각소 3주차

→ "원래 있어야 할 위치에 배치된다"라는 뜻→ 원래 있어야 할 기준에서 이동하여 지정한 공간에 여백을 준다. (지정한 요소만 움직임)mergin과 차이점: mergin을 하게 되면 요소가 이동할 때 옆에 요소도 같이 움직인다.→ 브라우저를 기준으로 포지션을 지정해준다

2022년 7월 20일
·
0개의 댓글
·

7/19(화) ☀️ HTML/CSS 고정형

🔥 HTML 🌟 aria-label button 태그 내부 텍스트를 aria-label 속성으로 옮겨주고 비워 디자인의 어려움 해결 🌟 🌟 🌟 🌟 🔥 CSS 🌟 margin : auto; auto 속성을 이용해 빈 공간의 넓이를 자동으로 읽어

2022년 7월 19일
·
0개의 댓글
·
post-thumbnail

2022-07-19

display를 flex로 지정하면 플렉스 방식으로 자식 요소들을 배치하게 됩니다.inline-flex는 해당 컨테니어 요소를 인라인으로 만든다는 차이가 있습니다.flex-direction은 내부 요소(아이템)들을 어느 축(가로 또는 세로)을이 값에 따라 justify

2022년 7월 19일
·
0개의 댓글
·

7/18(월) ☀️ HTML/SCC 고정형

🔥 HTML 🌟 img를 이용한 버튼 a태그 내부에 이미지를 넣는것이 아닌 의미에 맞게 버튼의 배경으로 마크업 하는 것이 맞다 이미지의 요청 횟수를 줄이기 위해 하나의 이미지를 이용해 이전 다음 처럼 돌려서 사용 🌟 주관적인 강조 주관적인 강조 요소는 em

2022년 7월 18일
·
0개의 댓글
·
post-thumbnail

001 - 반응형 스터디

float에 after 주는 이유, after {content:””; clear:both; display: block}display:flex 적용시 중요한 점. 가로 세로 정렬시 사용하는 속성.자식 요소 투명해질 때 해결법과 html 구조 변경. 자식도 투명될 때 해결

2022년 7월 16일
·
0개의 댓글
·

7/15(금) ☀️ HTML/CSS 고정형

🔥 HTML 🌟 form 관련 요소의 접근성 고려 중요 (크로스 브라우징💥) > 💥 legend 태그 필드셋 내부의 레전드 태그는 환경마다의 디자인 차이가 심하므로 직접 디자인 하는 것은 위험 💥 title (전역 속성) 대체, 보충 설명을 위한 전역 속성,

2022년 7월 15일
·
0개의 댓글
·

7/15 - 모각소 2주차

1. 선택자 정리 1-1. 자식 .div1 i { color: red;} → div1 클래스 내 요소의 자식 중 모든 태그 1-2. 직속 자식 .div > 1 { color: red; } → div 1의 바로 직속 태그 > ( 안에 있는 는 해당X) 1-3.

2022년 7월 15일
·
0개의 댓글
·