분류 전체보기144 Javascript - 데이터 타입(기초) ※chrome에서 console을 활용하여 예시를 보여줌 - chrome 에서 오른쪽 마우스를 클릭 후, 검사를 클릭한다. - 메뉴에서 console을 클릭하면 이용할 수 있다. 좌항과 우항 - str = '123'의 의미는 str(좌항)에 '123'(우항) 값을 넣었다는 의미(변수라는 개념인데 다음 글에 설명할 예정). - str을 호출 하면 '123'이 나온다. Javascript의 여러가지 타입 - data type(string(문자), number(숫자), boolean, undefiend) *string는 문자 형태 *string은 ' '과 " " 둘다 사용이 가능 *연산자 +를 사용 했을 때, ""안에 모든 data가 들어오는 것을 확인. ※ typeof라는 data type을 확일 할.. 2020. 5. 13. CSS - grid Grid - HTML element를 좌표처럼 활용하여 layout 할 수 있다. *display:gird로 grid 방식을 선언 해준다. *gird-template-colums : 100px 100px 100px는 100px 단위로 3개의 열을 만들어 준다.(개수만큼 열 생성) *grid-template-rows : 30px 30px 단위로 2개의 열을 만들어 준다.(개수만큼 행 생성) *border 등의 효과등을 넣어 줄 수 있다. 좌표처럼 활용하여 box size를 이용해서 크기를 조절 - 좌표처럼 활용이 가능 *grid-column-start:1; , grid-column-end:3; 을 간단하게 grid-column:1/3; 표현이 가능하다. *grid는 좌측 상단부터 (1,1)부터 시작이다.. 2020. 5. 7. CSS - 위치(float, column) 그림과 글자 조화 - 그림과 글자 위치를 조화롭게 배치 할 수 있다. *float:left;는 그림을 왼쪽에 두고, 오른쪽에 배치 *적용할 element 위치를 선정 Holy grail layout - float 기반으로 화면 layout 을 설정 할 수 있으나, 창 크기에 따라 조정이 안된다는 단점이 있다. *하단과 같이 Layout을 할 수 있으나, 단점으로 인해 최근에는 다른 방식을 많이 사용(grid(다음 글 내용에 추가 할 계획)) box-sizing:border-box; - border 효과를 넣었을 때, border의 크기는 컨텐츠의 크기로 설정 된다. - border box 크기를 border의 크기로 설정 할 수 있다. - float으로 layout을 설정 할 때, 유용한 기능. Mu.. 2020. 5. 7. CSS - Position 원하는 위치에 Text 및 img 넣기 - position속성을 이용하여 컨텐츠를 원하는 위치에 옮길 수 있다.(HTML element 어디에 위치 할지) *position : static;는 원래 기존 위치이다.(static은 정적 이라는 의미) 아무런 위치 속성을 주지 않으면 static이 적용된다. *position : relativ;는 기준점으로부터 위치를 옮길 수 있다. *position : absoulte;는 HTML 좌표(0,0)으로부터 위치를 옮길 수 있다. *position : fixed;는 화면에 고정을 시키는 것으로 스크롤을 움직여도 고정 되어 있다. *position : static은 기존 위치 이기 때문에 static을 없어도 지금과 같은 위치에 있다. *left라는 위치 값을.. 2020. 5. 7. 이전 1 ··· 31 32 33 34 35 36 다음 반응형
