728x90
반응형

Front 389

[CSS] position 속성

position 속성 - css에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정. - 정확한 위치 지정을 위해서는 top, left, bottom, right 속성과 함께 사용 static - position 속성을 따로 지정해주지 않았다면, 기본값인 static이 적용. - position : static; 으로 되어있으면 HTML에 작성된 순서대로 화면에 표시하라는 의미이기 때문에 top, left, bottom, right 속성을 작성해도 무시된다. relative - position : relative; 로 되어있으면, 이 요소를 원래 위치 기준으로 상대적 ( relative )으로 위치를 지정한다는 의미이므로, top, left, bottom, right 속성을 이용..

Front/CSS 2022.03.27

[javascript] var / let / const

변수의 선언은 var, const, let 으로 할 수 있다. ES6 에서 const 와 let이 추가되었다 var의 문제점 - 변수 중복선언이 가능하다 → 예상치 못한 값이 반환될 수 있다 - 함수 외부에서 선언한 변수는 전역변수로 설정된다. → 함수 레벨 스코프 때문 - 변수 선언이전에 변수를 참조하면 언제나 undefined를 반환. let - 변수 중복선언이 불가능하다. - 재할당은 가능하다. - 지역변수로 선언됨. ( 블록레벨 스코프 ) - 선언단계와 초기화 단계가 분리되어 진행 → 런타임 이전에 자바스크립트 엔진에 의해 선언 단계가 먼저 실행되지만, 초기화 단계가 실행되지 않았을 때 해당 변수에 접근하려하면 참조에러가 뜬다. ( 일시적 사각지대- Temporal Dead Zone :TDZ ) ..

Front/JS & jQuery 2022.03.26

[CSS] !important

CSS는 같은 속성을 여러번 정의하게 되면, 나중에 설정한 값이 적용된다. 만약 나중에 설정한 값이 적용되지 않아야 한다면 속성값 뒤에 !important 를 붙여준다. 프로젝트를 하다보면 css파일도 많아지고 추가하게되면서 같은 속성을 정의하게 되어 내가 원하는 효과가 나오지 않을 때가 있는데, 너무 남발하면 안되겠지만 중요한 곳에 적어두면 되겠다. 먼저 !important를 적어놓았어도 나중에 정의한 값에도 !important를 붙이면 나중에 설정한 값으로 바뀐다 ex) p{ background-color : red !important; float : left; } p{ background-color : blue; float : left } p{ background-color : green !impo..

Front/CSS 2022.03.24

[CSS] overflow 속성

overflow 속성은 요소의 콘텐츠가 커서 블록서식 맥락에 맞출 수 없을 때의 처리법을 지정한다. overflow: visible; visible - 콘텐츠를 자르지 않고 안쪽 여백상자 밖에도 그릴 수 있다. overflow: hidden; hidden - 콘텐츠를 안쪽 여백상자에 맞춰 잘라낸다. - 스크롤 지원도 하지 않는다. overflow: scroll; scroll - 콘텐츠를 안쪽 여백상자에 맞춰 잘라낸다. - 콘텐츠를 잘라냈는지의 여부와 상관없이 항상 스크롤로바를 노출한다. overflow: auto; auto - 사용자 에이전트가 결정한다. - 콘텐츠가 안쪽 여백상자안에 들어간다면, visible과 동일하게 보이나 새로운 블록서식 문맥을 생성 - 데스크톱 브라우저의 경우 콘텐츠가 넘치면 스..

Front/CSS 2022.03.22

[Bootstrap] Grid System

부트스트랩에서 제공하는 그리드 시스템 (Grid System) 은 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽시스템을 의미한다. 그리드 시스템은 일련의 컨테이너(container), 행(row), 열(column)을 이용하여 콘텐츠를 레이아웃하고 정렬하며 반응형디자인이다. 1. container - container가 감싸고 있는 콘텐츠를 가운데 정렬해준다. - 반응형으로 너비(width)를 지정하려면 ➡ .container - 화면의 100%로 너비(width)를 지정하려면 ➡ .container-fluid 2. row - column을 한줄로 감싸줌. (원래 div는 한줄을 차지하는 태그인데, row로 묶인 div끼리는 한줄안에 위치함.) 3. column - row..

Front 2022.03.21

[HTML][TABLE] <thead> / <tbody> / <tfoot>

/ / 태그들은 테이블 생성시, 각각 머리글, 본문, 바닥글영역을 표시하는데 사용한다. 스펠링만 보더라도 각각의 의미를 파악하는데 그리 어렵지는 않다. 머 리 글 본 문 ! 바 닥 글 태그는 적어주지 않더라도 테이블을 생성하면 자동으로 삽입이 된다. 필수로 세개의 태그를 적어주어야 하는 것은 아니며, 각각의 영역을 구분해줘야 할 때 사용하면 된다.

Front/HTML 2022.03.20
728x90
반응형