carousel1-1 CSS1-2 JavaScriptpreventDefault🕵️‍♀️carousel이란?캐러셀은 컨베이어 벨트라는 뜻으로 컨텐츠를 슬라이드 형태로 구현하는 것이다.위치와 크기에 대한 스타일링은 제외하고 캐러셀에 대한 스타일만 작성했을 때 위와 같은

1) 사용법2) layout3) img4) table5) form6) card🕵️‍♀️Bootstrap이란?웹 프레임워크 중 하나이다. 손쉽게 웹 스타일링이 가능하고 jQuery 플러그인 사용이 가능하다는 게 장점이다.Bootstrap 사용법에는 크게 두 가지가 있다

🕵️‍♀️Sass란?Sass는 CSS전처리기 종류 중 하나이다. 유지보수가 어려운 CSS 때문에 사용한다고 볼 수 있다. Sass의 variable, nesting, mixin, import, extend 등의 기능들이 유지보수를 돕는다. 유명한 전처리기로는 오늘 학

원본 클래스와 나의 거리는 400px이고 회전 패널이 Y축으로 45도 회전되어 있다. deg를 조금씩 증가시키면 애니메이션 처럼 패널이 회전하는 결과를 볼 수 있다. 캐릭터와 물체가 400px 거리에 있고 y축으로 회전한다. x축은 물체를 가로로 관통 시킨다음 회전,

최신 확장자를 사용 할 때는 위에 소스코드 처럼 기본적으로 동작 가능한 이미지(jpeg)를 브라우저에게 제공하고 최신 기술을 사용할 수 있는 환경에서는 최신 기술(webp, avif)을 제공하여 더 나은 사용자 경험을 제공할 수 있는 점진적 향상기법이 중요하다.몰랐던

웹접근성을 고려하여 input 태그를 IR 기법으로 숨기고 label 태그를 스타일링 하는 방법이 있습니다. 단순하게 이미지를 삽입하는 방법보다 더 나은 코드라고 볼 수 있습니다.select box도 위에 input box와 마찬가지로 h2 태그를 IR 기법으로 처리해

🕵️‍♀️ OOCSS란?UI에 있는 것들을 모두 객체로 생각하고 여러가지 모듈로 만들어 조립하는 기법입니다. 같은 형태의 UI 에 스킨만 다르다면 구조와 스킨을 분리하여 조합 합니다.구조에 해당하는 btn 클래스에는 width, height, padding, marg

1). flex-grow는 flex 아이템의 여백 비율을 정할 수 있는 속성입니다. 왼쪽 상단 첫 번째 이미지에서 "Good job" 아이템은 grow:1, "A" 아이템은 grow:1, "Hello world" 아이템은 grow:2 입니다.2). flex-shrin

1) 태그\[title="선택자"]타이틀 속성 값이 "선택자"인 태그를 선택합니다.2)태그\[title^="선택자"]타이틀 속성 값이 선택자로 시작하는 태그를 선택합니다.3)태그\[title$="선택자"] 타이틀 속성 값이 선택자로 끝나는 태그를 선택합니다.4)태그\[

안녕하세요 Ayden 입니다.CSS float 그리고 로그인 페이지 과제에 대해 말씀드리겠습니다.float과제float은 요소를 띄워서 정렬을 하는 속성입니다. float: left; float:right; 로 왼쪽 오른쪽 정렬이 가능합니다. 띄워서 정렬하는 float

안녕하세요 Ayden 입니다.회고 9일차에는 1기 선배님들 특강과 노션 특강이 있었고, 10일차인 오늘은 CSS position 관련된 내용을 학습했습니다.CSS position1). relative2). absolute3). fixed4). sticky이력서노션 특강

안녕하세요 Ayden 입니다.CSS 학습 중 헷갈리거나, 새로 배운 내용에 대해 말씀드리겠습니다.vmin, vmax 단위display:none, visibility:hidden, overflow:hidden;HTML img 태그와 CSS background-image텍

안녕하세요 Ayden 입니다.오늘도 CSS에 대해 말씀드리려고 하는데요. inline 및 block lebel, 마진 병합 등 이미 지난 게시물에서 언급한 내용이 많아 이번 회고글은 짧게 작성하고 지난 게시물에 내용을 추가하였습니다.CSS1) Reset CSS2) px

안녕하세요 Ayden 입니다.HTML 교육은 마무리되었고, CSS 교육이 시작되었습니다.오늘은 HTML table과 CSS, 그리고 과제 페이지 코딩 중 발생한 문제에 대해 말씀드리겠습니다.HTML table1) table 주변 요소 2) colspan, rowspan

안녕하세요 Ayden 입니다.오늘의 학습 내용은 CSS 기초입니다.inherit과 initialceter align1) margin:auto2) text-align:center3) vertical-align:middle4) transform:translate(X%, Y

안녕하세요 Ayden 입니다.오늘 학습 내용은 git과 HTML 태그들입니다.형상 관리 핵심툴인 Git과 GitHub.1) git clone 2) git pull3) git add4) git commit5) git pushHTML 태그1) <ifram>2) &lt

안녕하세요 Ayden 입니다.오늘도 어제와 같이 HTML 태그 관련 내용을 학습했습니다.HTML 학습 내용1\. 텍스트 레벨 태그2\. img, picture 태그위 학습 내용 1, 2를 보시고 애걔? 이거 밖에 공부 안 했어? 라고 생각하실 수 있지만, 오늘 회고할

안녕하세요 Ayden 입니다.오늘은 뭔가 본격적인 강의가 시작되는 느낌이었습니다. 그래서인지 이번 글은 좀 많을 것 같습니다. 많이 배운 만큼!!앞으로 학습 방법 및 일정FE 로드맵VSC extension 설치 및 단축키기초 상식1) 도메인, URL, IP, PORT,

안녕하세요, Ayden 입니다. 대학교 O.T 이후 10년이 지난 오늘 두 번째 O.T를 하게 되었습니다.🎉 먼저 간단하게 O.T 진행에 대해 말씀드리자면, 오전 9시경 모두 Zoom에 모여 부트캠프 운영 방식에 대해 듣고 Q&A 시간을 가졌습니다. 아무래도 처