HTML/CSS
1.HTML+CSS - 기초
class 와 id를 동시에 가지는 html 요소라면? stye="" 1순위\*\*.class 3순위p 4순위display: block 뜻 : 가로행을 전부 차지해주세요부모태그에 font-size 줘도 잘 먹는 이유?일부 스타일은 inherit(상속) 되기 때문!👉
2.HTML+CSS - 기초
float: left 요소를 붕 띄워서 왼쪽 정렬clear: bothfloat 다음에 오는 요소에게 주면 float로 발생하는 이상한 현상 해결 가능.header { width: 100%; / 부모 태그 width의 100% / height: 50px;
3.HTML+CSS - 기초 (selector)
nav 기능은 div와 같음단순히 navigation bar와 일반 div를 구분지어 읽기 쉽게 만든다.Selector 문법 중 공백 : ~ 안에 있는 이라는 뜻, ~ 안에 있는 모든 자식Selector 문법 > : ~ 안에 있는 직계자식HTML태그에 클래스 두 개 이
4.HTML+CSS - 기초 (배경 & margin collapse)
배경관련 CSS 속성들 background-size : px, %단위도 가능 cover: 배경으로 꽉 채워주세요 contain: 배경이 짤리지 않게 꽉 채워주세요 background-attachment: 웹 사이트가 스크롤 될 때 배경이 신기하게 동작하도록 만들고 싶
5.HTML+CSS - 기초 (position과 좌표속성)
top, left, bottom, right 속성으로 요소의 상하좌우 위치를 변경할 수 있다하지만, 이 좌표속성을 사용하려면 position 속성이 필요.position 속성이란?좌표속성을 적용할 기준점이 여기에요~! 라고 지정해주는 역할position 부여하면?좌표이
6.HTML+CSS - 기초 (반응형 width & box-sizing)
공중에 떠있는 애들이 많을 때 z-index 숫자가 높을수록 앞으로 온다width : -% 의 문제는 pc사이즈에서 끝없이 커진다max-width를 주면 최대 폭을 결정해준다⭐⭐⭐ width 는 content 영역의 너비를 의미박스에 width: 600px를 줘도 pa
7.HTML+CSS - 기초 (form & input)
form action="" 작성한 내용이 어떤 서버경로로 전달될지method="" 작성한 내용이 어떤 방식으로 서버에 전달될지 text email password radio file checkbox submitplaceholder는 배경 글자value는 미리 입력된 값
8.HTML+CSS - 기초 (form & input 숙제: Contact Us 섹션 만들기)
form 레이아웃 제작시에도 포인트는 div박스뭘 만들든 일단 박스부터 그리면서 시작하기!!( 나는 div가 아니라 form을 적어버렸당... ⭐⭐⭐ 앞으로 숙제할때에는 무조건 박스 그리면서 시작하자!)항상 어떻게 class를 만들어야 CSS를 재사용 할지 고민하기!i
9.HTML+CSS - 기초 (Table 레이아웃, vertical-align 속성)
ex) 쇼핑몰 장바구니가로줄 만들 땐 tr세로줄 만들 땐 td제목용 세로열 만들 땐 th<thead>, <tbody> 용도 : 분류를 위한 태그<table> 은 기본으로 틈이 존재없애려면 CSS에서 table 한테 border-collapse: col
10.HTML+CSS - 기초 (Table 레이아웃 숙제:Cart 페이지 만들기)
border-bottom 사용하기td 폭 조정시 유의사항td에게는 최대한 이만큼 차지해보세요~ 라는 뜻!(다른 셀들에게는 방해되지 않을만큼)한 개의 td에게 width 를 지정해주면 나머지들은 자동으로 늘어남td에게만 적용하면 댄다..(?)가로셀 병합: colspan세
11.HTML+CSS - 기초 (pseudo-class로 인터랙티브 버튼 만들기)
hoverfocusactive(hofa로 외우기)기타코드기타등등 코드들모든 링크의 밑줄제거: a태그에 text-decoration : none 붙이기
12.HTML+CSS - 기초 (코드양이 줄어드는 class 작명법 OOCSS, BEM)
누가 빨간버튼과 파란버튼을 만들어오라고 하면?가장 간단한 방법class 두 개를 만들어서 각각 button에 집어넣기❗하지만 이런 경우 CSS파일이 매우 길어지고 용량이 큰 CSS파일은 웹사이트 로딩 속도를 저하시킴👉 1. 버튼의 기본 스타일인 padding, fon
13.HTML/CSS (중급) - 웹 폰트 넣는법과 안티앨리어
font-family는 inherit 됨\-버그없이 사용하려면 폰트의 영문명을 사용해야한다\-폰트명에 띄어쓰기가 있을 수 있으니 따옴표 안에 담는것이 좋다\-폰트명을 콤마로 여러개 쓰면 제일 왼쪽에 있는 폰트부터 적용한다 실패하면 뒤에있는 폰트들을 차례로 적용!\-웹사
14.HTML/CSS (중급) - 박스 가로배치가 편리한 flexbox
Flexbox 레이아웃 사용법 ⭐⭐⭐ 박스를 감싸는 부모요소에게 display: flex 사용 CSS Flex에 대해 아주 자세히 나와있는 사이트 Flexbox 세부속성 사용하기
15.HTML/CSS (중급) - 코드짤 때 유용한 Emmet 그리고 부가기능들
0. 부가기능 설치방법 Brackets의 경우 파일 - 확장기능 관리자 원하는 부가기능 검색 후 설치버튼 누르기 (참고) Brackets 부가기능 서버가 가끔 다운되어서 https://registry.brackets.io/ 여기서 직접 찾고 다운로드 후 저기로 드래그 하기 VScode의 경우 제일 왼쪽 메뉴에서 Extension 버튼 누른 후 원하는 ...
16.HTML/CSS (중급) - head 태그에 들어갈 내용
HTML 문서의 기본 템플릿은 꼭 head와 body 태그를 포함해야한다.1\. 각종 CSS 파일들현 HTML파일과 같은 위치에 있는 CSS폴더 안에 있는 main.css파일을 첨부하라. 라는 경로!css/main.css/css/main.css두 개의 경로는 다른 경로
17.HTML/CSS (중급) - 반응형 레이아웃
CSS 파일 최하단에 사용하기.box 안의 font-size 스타일 중복이 발생하면 더 밑에 있는 스타일을 적용하기 때문에큰 사이즈 -> 작은 사이즈 순으로 작성하기1200px ----- 여기부터 태블릿 디자인992px ----- 여기부터 태블릿 디자인768px ---
18.HTML/CSS (중급) - Transition 속성으로 CSS 애니메이션 구현
시작스타일 만들기최종스타일 만들기언제 최종스타일로 변하는지transition 으로 애니메이션 구현현재 HTML 요소의 투명도를 조절할 수 있다.0부터 1까지의 실수를 입력 가능0.5 이러면 반투명해짐 위에 있는 스타일이 변하면 1초동안 서서히 변경해줘 라는 뜻
19.HTML/CSS (중급) - transition숙제 : 상품진열 레이아웃과 애니메이션 카피하기
저번시간에 배운 레이아웃을 그대로 활용하면❌❌(이유1) "이미지에 마우스를 올리면 위에있는 .overlay 박스의 스타일을 수정하라"이런 코드를 짤 수 없다!(이유2) "이미지에 마우스를 올리면 div를 이미지 위에 출현시켜라~"이런식의 코드 제대로 동작❌❌이런식으로
20.HTML/CSS (중급) - Portfolio 실습1
1\. 위와같은 랜딩페이지 만들기2\. 휴대폰 사진은 모바일로 축소 시 사진처럼 글자 밑에 위치하기3\. 휴대폰 사진 뒤 파란배경은 색상 gradient 가 적용 위는 파란색, 밑은 보라색 색상을 단계적으로 적용하기3\. 나머지 영역의 모바일 레이아웃은 알아서 만들기4
21.HTML/CSS (중급) - Bootstrap 설치와 사용법
프론트엔드 Component Library라고 하여웹 페이지에 필요한 버튼, 메뉴, 탭, 모달, 카드 등 필수요소들을 모아놓은 일종의 뼈대 CSS파일이다.<head> 안에 CSS 첨부<body> 끝나기 직전에 js 첨부하기CSS에다가 padding-botto
22.HTML/CSS (중급)-Bootstrap Grid 레이아웃
.row 안에 .col 사용하면 균일하게 쪼개기 가능정확히 쪼개고 싶으면 col-차지할 크기ex)"col-6" -> 2등분"col-4" -> 3등분"col-3" -> 4등분row 는 내부를 12칸으로 쪼개주는 class 명조건문을 더하면 된다ex) col-md-6 ->
23.HTML/CSS (중급)-CSS 덮어쓰기 & 어떤 코드가 좋은 코드인지
1\. 같은 클래스명 하단에 쓰기하나의 CSS 파일일 경우,CSS파일이 여러개 첨부되어있을 경우💡 @media 문법도 하단에 작성해야하는 이유!2\. 우선순위 높이기tag<class<id<style="" 순으로 우선순위가 높다1점 10점 100점 10
24.HTML/CSS (중급) - SNS Profile 만들기
25.HTML/CSS(고급) - Pseudo-element
Psudo-class와 Pseudo-element Psudo-class: 특정요소가 다른상태일 때 스타일을 줄 수 있게 도와준다 👉 : Pseudo-element: 내 안에 있는 내부의 일부분만 스타일을 줄 수 있게 도와준다 👉 :: Pseudo-element로
26.HTML/CSS(고급)-딥다크한 어둠의 공간 Shadow DOM
<input type="file">입력 시 버튼이랑 글자 이렇게 2개의 HTML요소가 생성된다<input type="range">, <progress> 이런것들도 비슷한데 왜 그럴까용?Shadow DOME이란?HTML개발시 코드가 너무 복잡해지지안힉 위
27.HTML/CSS(고급)-SASS기초 1편 : 셋팅
CSS라는 언어는 매우 원시적인 언어h4태그 색이 어쩌구 스타일만 넣는 언어이기 때문.그런데 CSS가 몇천줄이 넘어가면? CSS 관리 자체에도 큰 부담이 된다이런 상황에서 여러가지 문제들을 해결할 수 있는 Preprocessor (전처리언어) 라는 걸 만들어냄그 중 하
28.HTML/CSS(고급)-SASS기초 2편 : 핵심문법
문법 내용보다 문법을 어디에 쓸지 그 용도를 중요하게 기억해야한다용도를 알아야 문법을 자유자재로 사용할 수 있기 때문!!.sass파일도 만들 수 있는데 이 파일은 SASS문법으로 코드짤 때 중괄호 생략이 가능하다 요렇게!하지만 자주 쓰이는 것은 .scss파일라는 점(인
29.HTML/CSS(고급)-SASS기초 3편 : Mixin, use 등
지난 시간에 배운 변수와 매우 유사변수는 짧은 값 하나만 저장해서 쓸 수 있는 문법이었지만@mixin은 스타일 여러줄을 한 단어로 치환해서 사용 가능@mixin 이라고 쓰고이름을 하나 지어준 후 () {}붙인 후,한 단어로 치환할 값들을 중괄호 안에 쭉 나열하기이렇게
30.HTML/CSS(고급)-SASS 숙제
(팁) 초보는 처음부터 SASS문법으로 작성하는 것보단 우선 CSS작성 후 SASS문법으로 하나씩 바꿔보는 연습부터!!<ul>, <li> 태그 등을 이용해 위 사진에 나온 리스트의 HTML과 CSS를 디자인해보세요.(조건1) <li>태그에 .active
31.HTML/CSS(고급)-video, audio 다루기
muted는 음소거상태autoplay는 자동재생poster는 썸네일이미지preload는 영상을 먼저 다운을 받을지 말지를 선택가능(auto, metadata, none 사용가능)
32.HTML/CSS(고급)-transform & animation 으로 매끄러운 애니메이션 만들기
transform은 어떤 요소를 독립적으로 움직이게 만들고 싶을 때 사용한다본인 원래 위치에서 자유롭게 이동한다rotate : 회전translate: 좌표이동scale: 확대축소skew: 비틀기간단한 a->b 애니메이션들은 시작스타일, 최종스타일, 트리거, transi
33.HTML/CSS(고급)-transform & animation 숙제(와 해설)
애니메이션 제작해오기1\. 마우스를 올리면 흔들리는 버튼 만들기분석해보면 (1) 좌측 회전 (2) 우측 회전 (3) 좌측 회전 (4) 제자리로 이동(velog... 영상 삽입이 안된다,,)2\. 마우스를 올리면 회전하는 + 기호 만들기분석해보면 (1) 좌측 회전 (2)
34.HTML/CSS(고급)-레이아웃 만들기 : CSS Grid 레이아웃
Grid 레이아웃이란? 말 그대로 격자를 만드는 레이아웃이다.부모 <div> 에 display:grid를 주면 자식 <div>들은 모두 격자처럼 진열된다grid-template-columns : 격자의 열 너비와 갯수grid-template-row : 격자의
35.HTML/CSS(고급)-CSS Grid 레이아웃 (숙제, 해설)
업로드중..(힌트)
36.HTML/CSS(고급)-Admin Page
PC모바일1\. 상단 검색바 input은 커서가 찍혀있을시 (focus시) 길이가 서서히 늘어나야합니다.\-아무튼 클릭시 width를 키우기2\. 좌측 메뉴는 마우스를 올리면 (hover) 이렇게 커집니다. \-일단 사이트가 두개의 세로 선으로 쪼개져야할 것 같습니다.