html
- div
div는 실제 홈페이지 개발자 도구를 통해 보면 가장 많이 쓰이는 것으로 보인다.
블록레벨 요소이며 다른 태그들(블록, 인라인 등)를 그룹으로 정의한다.
- body안의 요소
Header(nav) ,section(article) ,aside, footer
보통 header안에 nav를, section안에 article을 포함한다.
css
- style 적용방법
CSS style을 적용하는 방법은 크게 3가지가 있다.
1.태그 속성에 직접 쓰기
2.head안의 style에 쓰기
★3. 별도의 css파일에 따로 써서 link태그로 불러오기
예) <link rel="stylesheet" href=".style.css">- 코드 구조
우리가 쓰는 코드는 눈에 보이진 않지만
margin, border, padding,content 순으로 박스 형태로 이루어져 있다.
- 가운데 정렬
태그가 block속성일 때
<margin:0 auto;>를 해주면 정렬된 모양을 얻을 수 있다.- margin:0 auto 가운데 정렬 오류★
display:inline-block일 때 <margin:0 auto;>을 해도 가운데 정렬이 되지 않았는데, 이는 inline과 block의 속성을 모두 가지고 있어서 그렇다.
inline의 속성이 있으면 글자의 크기만큼 너비를 갖기 때문에 마진값을 변경해도 정렬이 되지 않고 왼쪽으로 치우쳐 보인다. 따라서 display:block으로 바꾸면 문제를 해결할 수 있었다.
- 선택자 종류
#:id , .:class , *:전체, >:자식 , 공백:후손전부,
+:바로 및 태그 ,~:동급태그 (예 h1 ~ p h1과 동급인 것중 p태그만 바꿈)
:nth-child() :자식 태그중 어떤거를 고를래 라는 뜻. ★
:nth-child(N) / 부모안에 모든 요소중 N번째 요소
A:nth-of-type(N) / 부모안에 A라는 요소중 N번째 요소
:not() 선택자는 ()안에 부분을 제외하고 코드를 적용 시키라는 뜻이다
- not() 선택자 예시
li a:hover:not(.active){background-color: aqua;}
해석 : li a부분을 마우스 가져다 대면 배경을 바꾸는데 active 클래스인 거는 바꾸지 않는다.
- 선택자 여러개 쓰는 상황
선택자를 여러개 쓰는 상황이 있다.
예) .container > li:hover{}
해석:container라는 class 자식 태그 중 li 태그에 마우스를 대면~{}하라
예)input[type=checkbox]:checked + div{height:0;}
해석체크박스에 체크되어 있으면 인접한 div의 height를 0으로 해라
- overflow★
기본적으로 배경색등은 height가 0일 때 사라진다.
그러나 글자가 있으면 글자는 사라지게 할 수 없다.
따라서 이를 없애기 위해 overflow:hidden;을 사용한다.
글자 크기보다 배경부분이 작으면 overflow가 발생한다.
이때 overflow:hidden;은 overflow면 숨기라는 태그이므로 글자까지 같이 사라지게 된다. 이런 내용은 팝업창 열어보기 등을 사용할 때 쓰이거나 한다.
- ul 목록 표시 제거
ul과 li에서
li앞에 점들을 없애고 싶으면 ul에 list-style:none을 해주면 된다
그리고 원래 점이 있었던 그 공간 자체를 없애고 싶으면 padding:0을 해주면 된다.
이때 공간자체를 없애고 싶으면 list-style:none padding:0을 모두 하지 않고, padding:0만 해줘도 여백이 사라진다.
- position ★
부모 태그에 position:relative로 두고
자식 태그에 position:absolute를 두면 겹치는 모양으로 만들 수 있다.
이때 자식 태그의 위치 값은 부모태그 위치 왼쪽 상단기준이 된다
부모태그가 없는데 position:absolute를 준경우 body 왼쪽 상단이 기준이 된다
position:fixed은 지정 위치 브라우저에 고정시킨다
position: absolute; top: 0; left: 0; bottom: 0; right: 0;
//꽉채우라는 뜻이다. 상하좌우 여백 없애라는 뜻
- float
float태그는 사진이랑 글이랑 같이 놓고 싶을 때 사용하기도 한다.
float태그는 위에 떠있는 성질이다.
예) footer 위에 header, article 등이 있는데 article을 float로 띄워버렸다.
그러면 footer는 header랑 붙은다. 이럴때 clear:both를 해주면 float의 뜨는 성질을 생각 안하겠다 라는 의미이고 article에 붙게 된다
- float로 띄워져서 인식을 못할 때 해결방법 세가지★
각각 별개로 사용가능
1. 부모태그에 overflow:hidden를 준다.
2. 띄운 아래 태그에서 clear:both를 준다.
3. 예) 띄운 태그 id가 aa일때 #aa:after{content:""; display:block; clear:both;}를 해준다
// 2번이랑 동일한 원리지만 바로 아래 태그에 공백을 주고 거기서 clear를 해주기 때문에 확실하게 할 수 있다.
- css 선택자 해석 관련★
.container:hover .overlay /
hover뒤에 공백을 줘야함 container에 마우스를 대면~ overlay클래스에 영향을 주라는 뜻.
- media screen 관련★
@media screen and (orientation: landscape) {}
and는 조건을 의미하며 and뒤에 띄어써야 적용된다
붙여버리면 한 단어로 인식하기 때문에 완전히 다른것이다.
- class 구분 관련★
class가 slider , slider round 두개 있을 때
style에서 .slider로 적용을 해주면 기본적으로 두 class에 모두 적용된다.
추가로 slider round에만 더 적용을 원할 때
.slider.round {} 적용해주면 된다
- 부가 설명
.a, .b, .c{}
이런 식으로 쉼표가 있을 때는 각각의 항목을 or로 적용한다. 즉 나열한 모든 클래스 혹은 id, 태그에 적용되고, 각 클래스는 따로 사용이 가능하다.
(<p class=".a">이렇게 단독으로 사용 가능 )
.a .b .c{}
공백으로 연결해서 사용하면 뒤에나온 선택자가 하위 개체로 지정된다. 즉, A요소 내부의 B요소 내부에 있는 C요소에만 적용이 된다는 뜻.
.a.b.c{}
공백 없이 연결해서 지정하면 class="a b c"처럼 모든 속성을 한번에 적용 시키는 요소에만 지정한 설정이 적용된다.
- flex★
display:flex 블록태그처럼 되는데 왼쪽 정렬처럼 보이게 됨
기본 방향이 row임 (밑으로 쭉 내려가서 세로방향처럼 보임)
flex-direction: row,column 등 row-reverse등을 해주면 float-right의 결과처럼 오른쪽부터 채워지는 효과를 보임
ul, li가 있을 때 ul에 flex정렬을 해주면 ul안에 있는 li들이 정렬됨
부모태그 display를 flex로 하고 자식태그에 flex-grow:1을 하면
부모의 크기를 자식태그들이 균등하게 가져가겠다라는 뜻이다.
이걸 안치면 글자 크기만큼 가져간다.
flex-basis:기본크기를 어떻게 설정하겠다
flex-shrink:기본크기가 있을 때, 부모모다 작아졌을 때 줄어드는 비율을 정함
display:flex 일때
justify-content: start, end, center, space-between 등등
내용을 왼쪽으로, 오른쪽으로 가운데로 번갈아가며 등등 가로 정렬
display:flex 일때
align-items : center 세로 가운데 정렬 flex-end 밑으로 정렬
즉, 가로에 관한건 justify-content:
세로에 관한건 align-items :
flex-flow : flex-direction flex-wrap을 축약
flex는 flex-grow flex-shirink, flex-basis를 축약한 것으로
flex:1의 의미는 flex-grow:1 flex-shirink:1, flex-basis:0%와 같다
- 스타일 중복
스타일이 중복되는 경우 우선순위는 상위번호에 있다. (같은 번호내에서는 가장 아래 코드)
- 색상 이름
색상은 #ff00ff 이런식으로 겹치는경우 줄여서 쓸수 있음 2개단위씩
f0f, #ffffff인경우 #fff
- img 최소, 최대 크기
img style 중 max-width / min-width는 사진의 최대, 최소 크기를 정하는 태그이다.
사진을 확대 했을 때 더 높은 해상도의 사진등을 보여주기 위해 사용할 수 있다.
- display 화면에 보이고 안보이게 하기
display:none/화면에 보여주지 마라 display:block/안보이는 애를 보이게 하라
- 앵커태그 경로
메뉴에 다른곳으로 이동하는 링크를 달고자 할 때 경로(예 lib/html)를 적을 것(a.html이런식으로 파일을 적지 말것)
- 커서 모양
cursor:pointer로 해주면 마우스 모양이 나옴
- before, after
A:before{content:} , A:after{content:} /A 전과 후에 내용을 추가함
- margin
margin-top(bottom, left,right) : -방향 부분에만 margin값을 주는 것.
border-top(bottom, left,right) : -방향 부분에만 border값을 주는 것.
이경우 border의 크기 선종류 색상 등을 선택한다.
- text shadow
text-shadow : x축 y축 블러값 색상 (-값은 반대 방향)(글자일 때)
box-shadow : x축 y축 블러값 색상 (-값은 반대 방향)(box일 때)
- box-sixzing★
box-sizing:border-box
margin, padding값을 바꾸어도 width값에 맞추어 최종 크기를 고정한다
- 변수 이름 저장(색상등)
:root{--변수이름:#색상}
이렇게 지정해두고 각각 색상 부분에 var(--변수이름);으로 한번에 바꿀 수 있다
- img background
그림위에 글자를 써야할 때 그림을 background로 넣어주면 수월하다
예) background-image: url(이미지경로);
- 세로 정렬
height: 값이랑 line-height: 값이랑 같게 해주면 세로정렬이 된다
- 시간지연
transition / 시간 지연
- 모바일 화면 고려
meta name="viewport" content="width=device-width, initial-scale=1.0"
viewport 즉 화면 내용의 너비는 기기의 너비와 같게 하며,초기 값은 1로 하겠다는 뜻
- transform 이동태그
transform : translate(-50%x축, -50%y축) /위치를 여기로 옮기라는 뜻
- css 파일 불러오는 법
@import url(css/파일명.css)이렇게 css파일을 불러올 수 있음
- 기본 css적용 코드
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">는 브라우저에 적용되는 기본 css를 모두 동일하게 적용하기 위해 적용되는 reset.css 기능이다.
- css 도움 사이트
밴더프리픽스 generator 라고 하면 여러 사이트(예:https://simplecss.eu/prefix.html )가 나오는데 여기서 카피해서 원하는 내용을 css에 적어주면 됨
