본문 바로가기

분류 전체보기

 (66)
[새싹x코딩온] 웹 퍼블리싱 과정 4주차 - 1 | JS - 문자열, 배열, DOM 관련 메소드 문자열 관련 메소드 length : 문자열의 길이를 반환(공백 포함) toUpperCase()&toLowerCase() : 문자열 전체를 대문자, 혹은 소문자로 변경 indexOf("") : 매개변수로 문자열을 받아서 몇번째 인덱스인지 숫자 반환, 없는 문자는 -1을 반환한다. slice(시작인덱스 ,끝인덱스) : start부터 end-1까지의 문자를 추출한다, 매개변수로 음수값도 가능하다. replace(문자열1, 문자열2) : 문자열1을 문자열2로 변경한다. replaceAll(문자열1, 문자열2) : 문자열1을 전부 찾아서 문자열2로 바꿔준다. repeat(n) : 문자열에 대해 n번 반복한다. trim() : 문자열의 양끝 공백 없애기 split() : 매개변수로 들어온 문자열을 기준으로 str을..
[새싹x코딩온] 웹 퍼블리싱 과정 3주차 - 3 | JS - 변수, 연산자, 함수, 조건문, 반복문 변수 (variable) - 데이터를 저장하고 참고(사용)하는 데이터의 이름 var - 중간의 같은 이름의 변수를 다시 선언해도 기존의 변수에 덮어 씌운다. - 변수를 선언했다는 건 분명이 다른 데이터를 넣으려는 것인데, 그것을 기존의 데이터에 덮어 씌우면 문제가 발생한다. - 변수가 {블록 단위}에서 끝나는 것이 아니라, 자기 맘대로 전역으로 돌아다니고 영향력을 행사한다. - 따라서 ES6 문법부터는 var 대신 let 사용을 권장한다. let - 재선언은 불가능하지만 재할당은 가능하다. let a = 2; let a = 5; # 재선언 a = 8; # 재할당 const - 재선언이 불가능하고 재할당도 불가능하다. - 선언과 동시에 초기화를 해야 한다. let a; # 가능 const b; # 불가능 ..
[새싹x코딩온] 웹 퍼블리싱 과정 3주차 - 2 | CSS - grid, JS - 데이터 종류, 형 변환 그리드 (Grid) - 페이지의 레이아웃을 만들 때 사용 - flex가 한 방향에 대해서 정렬을 했다면 grid는 여러 방향에 대해서도 정렬 - flex와 마찬가지로 container속성과 item속성이 각각 존재한다. - 주축 개념이 없기 때문에 justify는 가로축이고 align은 세로축이다. Container 속성 grid-template-rows / grid-template-columns - 각 아이템 행과 열의 크기를 설정 - 하나의 단위가 아닌 여러 단위를 섞어서 사용 가능 - 새로운 단위 fr (fraction, 공간 비율) - repeat() 함수와 같이 사용 가능 grid-template-rows: repeat(5, 100px) grid-template-rows: 100px 100px ..
[새싹x코딩온] 웹 퍼블리싱 과정 3주차 - 1 | CSS - animation, 미디어 쿼리 Animation transition vs. animation transition - hover, onclick, active 등의 이벤트에 의해 발생된다. animation - '중간 스텝'을 지정해 보다 세밀한 스타일 전환 가능 - keyframes를 사용 @keyframes - css의 애니메이션 효과를 개발자가 직접 지정하는 기능 - 애니메이션의 중간 지점마다 css 속성값을 지정하여 세밀하게 애니메이션 조절하는 기능 - 키프레임을 변수에 선언하고 해당 변수를 css에서 불러와서 사용할 수 있다. 키프레임은 @keyframes 이름 { 0% {속성: 속성값;} 100% {속성: 속성값;} 또는 @keyframes 이름 { from {속성: 속성값;} to {속성: 속성값;} 로 사용할 수 있다. ..
[새싹x코딩온] 웹 퍼블리싱 과정 2주차 - 3 | CSS - flex, transform, transition Flex Container 속성 (부모) - 정렬을 도와준다. - 자식 요소들이 수평으로 정렬된다. flex-direction - 주 축을 설정 row - 행 축 (좌 => 우) (기본값) row-reverse - 행 축 (우 => 좌) column - 열 축 (위 => 아래) column-reverse 열 축 (아래 => 위) flex-wrap - flex items 묶을(줄 바꿈) 여부 nowrap - 묶을(줄 바꿈) 없음 (기본값) wrap - 여러 줄로 묶음 justify-content - 주 축의 정렬 방법 flex-start - flex items를 시작점으로 정렬 (기본값) flex-end - flex items를 끝점으로 정렬 center - flex items를 가운데 정렬 space-b..
[새싹x코딩온] 웹 퍼블리싱 과정 2주차 - 2 | CSS - 위치 속성, 배경 속성 position - HTML 문서 상에 요소가 배치되는 방식을 결정 static - 기본값 - 이동할 수가 없다. relative - 요소 자신을 기준으로 배치 - 자기자신을 기준으로 이동한다 - 문서 흐름을 해치지 않는다. absolute - 위치 상 부모 요소를 기준으로 배치 - 부모 위치 기준으로 자리를 잡으려면 부모가 static이 아니면 된다. - 기준이 없을 때는 viewport를 기준으로 이동 - 만약 부모가 static이라면 static이 아닌 요소가 나올 때까지 조상으로 올라간다. - 문서 흐름을 해친다. fixed - viewport를 기준으로 배치 - 스크롤이 되어도 움직이지 않는다. ※ position 속성의 값으로 absolute, fixed가 지정된 요소는 display 속성이 ..
[새싹x코딩온] 웹 퍼블리싱 과정 2주차 - 1 | CSS - 문자 속성, 박스 모델 속성 CSS 가상 클래스 선택자 :first-child - 선택자가 형제 요소 중 첫째라면 선택, 선택자가 첫째가 아니라면 선택이 안됨 :last-child - 선택자가 형제 요소 중 막내라면 선택 :nth-child(n) - 형제 요소 중 (n)째라면 선택 :nth-of-type(n) - 요소 중에 (n)째라면 선택 :not(요소) - 선택한 요소를 제외 CSS 가상 요소 선택자 - 선택 된 요소의 앞, 뒤에 별도의 Content를 삽입하는 선택자 - 반드시 Content라는 속성을 사용 - 빈 값('')이라도 넣어주어야 적용이 됨 - 실제로 의미 없는 HTML 태그를 만들지 않고 요소 삽입이 가능하여 자주 사용 - 예를 들어 쇼핑몰 페이지에 메뉴에 Hot, 추천 등을 넣기 위해 별도의 태그를 삽입하는 것이..
[새싹x코딩온] 웹 퍼블리싱 과정 1주차 - 3 | CSS - table, 선언방식, 선택자 - 표를 만들 때 사용하는 태그 - 표를 감싸는 태그 - 과거에는 테이블을 사용하여 레이아웃을 구성하였으나 기능 상의 한계로 인하여 최근에는 공간 분할 태그인 태그를 사용 - 먼저 행을 쓰고 행의 자식 요소로 칸을 넣어주는 것이 기본 - 표 내부의 행 - 표 내부의 제목 칸 - 행 내부의 일반 칸 속성 border : 테두리 두께 cellspacing : 테두리 간격 사이의 너비 cellpadding : 셀 내부의 간격 align : 테이블 정렬 속성 width와 height : 테이블의 너비와 높이 bgcolor와 bordercolor : 테이블 배경색과 테두리 색 속성 colspan : 해당 칸이 점유하는 열의 수 지정 rowspan : 해당 칸이 점유하는 행의 수 지정 semantic 태그 - HT..

티스토리툴바