목록Front-end (103)
NULL
변수
var와 let가 있는데 let는 es6에서 쓴다고 하니 패스하겠습니다. 위와 같이 변수에 자료형(문자, 정수, 참,거짓) 등을 저장할 수 있습니다. 그리고 이미 값이 있는 변수에 다른 값으로 초기화도 가능합니다. 변수는 여러 자료형을 가질 수 있다. 위부터 차례대로 string 문자열의 자료형태이고, 정수를 저장한다거나 Boolean으로 참, 거짓을 다룰 수 있고 Array로 여러 값의 자료형은 하나의 배열에 저장할 수도 있으며, Object로 어떤 변수든 저장이 가능합니다.
justify-content (가로 정렬) flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. align-items (세로 정렬) flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다. flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다. center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다. baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다. stretch: 요소들을 컨테이너에 맞도록 늘립니다. flex-directi..
ol = 순서가 있는 리스트 ul = 순서가 없는 리스트 li = 리스트 아이템(리스트 안에 씀) ol태그 순서 맥이는법 예를 들어 에 type을 주고 a를 쓰면 그 다음은 bcdf로 자동으로 순서를 정렬된다. 네비게이션 바 만들때 자주 사용함 리스트 앞에 표시되는 글자를 없앨려면 li에 블록을 주면 해결된다. li스타일링 list-style: none;을 하면 앞에 표시되는 텍스르를 없앨수있다. 하지만 패딩값은 남아있기때문에 패딩도 0으로 초기화해준다.
float으로 태그를 지정하면 인라인과 인라인 블록은 들어오지 못한다. float으로 지정한게 이미지라고 한다면 글자는 이미지안에 들어갈수없다는 말과 같다. 이런 용도로 많이 사용한다고 한다.
Absolute 포지션 가장 가까운 포지셔닝이 된 조상요소가 기준 쉽게 이해하자면 상위 태그에 포지셔닝이 된것을 기준으로 적용한다.
fixed 포지션 브라우저 기준으로 움직인다. fixed는 고정을 뜻한다. 스크롤을 내려도 fixed적용한 요소는 그대로 페이지에 고정된다. 웹사이트 상담톡같은 기능처럼 웹페이지에 항상 고정되있다. fixed는 네비게이션바같은 곳에 자주 사용된다.
원래 있던 위치를 기준으로 한다. 공간을 준다고 하면 position:relative; top: 30px; 하게 되면 포지션을 적용한 태그기준으로 탑에 여백30px이 생기면서 포지션을 적용한 태그는 아래로 내려가는 효과를 갖는다. margin-top:30px;이랑 얼핏 비슷하다. 차이점이 있다면 마진은 여백을 주는 과정에서 다른 내용들의 위치까지 영향을 주지만 relative포지션은 적용한 태그 이외에 다른 태그들의 위치에 영향을 주지않는다. 한마디로, 포지션은 적용된 태그만 움직이게 되고 주변 글자들은 움직이지않고 제자리에 있다. relative를 써서 움직이게 되면 전에 있던 자리는 공백처리된다. 요소들이 겹치는 레이아웃을 할때 사용하면 유용하다.
모든 요소의 가운데를 맞추고 싶다면 모든요소에 vertical-align: middle; 사용 예를 들어 text-align:center; 또는 margin-left:auto; margin-right:auto; 들이 가운데 정렬이라면 vertical-align: middle;은 세로 정렬이다. 이 가운데 정렬이라면 세로 가운데 정렬이다.
