월드스토리의 코딩 나라

요소의 변환효과를 주는 함수 #. transform 2차원 변환함수1. translate(x,y) : 이동(x축, y축), translateX(x), translateY(y) : 한 축으로만 이동2. scale(x,y) : 크기를 늘리는 함수, scaleX(x), scaleY(y) : 한 축으로만 키움(배수)3. relate(degree) : 특정 각도로 테그를 회전시킴  예) 30deg4. skew(x,y): x,y 축으로 값만큼 기울임, skewX(x),skewY(y) : 특정 축으로만 기울임5. matrix(n,n,n,n,n,n) : 2차원 변환 효과 3차원 변환 함수.  transform 함수를 보충하는 속성  1. backface-visibility : 3D 변환으로 회전된 요소의 뒷면 숨김 여..

다양한 배경 속성들#background 1. background-color 요소의 배경 색상을 결정함(transparent,색상 등이 속성으로 들어감) 2. background배경을 넣을 수 있는 속성으로 뒤에는 주로 함수가 들어감. #. linear-gradient()색상이 두가지 일때 : 상하로 색 2개 지정방향과 색상 두가지 : 해당 방향으로 그라데이션을 만듬 방향|색상|색상1의 비중|색상2 : 색상1의 비중이 지정값인 그라데이션방향|색상1|색상2|색상3 : 색상을 3개 사용한 그라데이션 3. background-image  이미지가 없는 게 default url("경로") -> 이미지 경로 단, 이미지 설정값이 테그의 크기보다 작을 경우 반복출력 4. background-repeatrepeat(이..

Position1. static : 정적 위치 지정 방식(기본값)2. relative:상대 위치 지정방식3. absolute: 절대 위치 지정방 식 ->static이 아닌 조상이 기준4. fixed : 고정 위치 지정방식 => 뷰포트(브라우저)를 기준으로 배치 요소 쌓임 순서1. 어떤 요소가 사용자와 더 가깝게 있는지를 결정2. 요소에 position 속성의 값이 있는 경우 위에 쌓임(기본값 static)3. 2번 조건이 같은 경우, z-index 속성의 숫자값이 높을 수록 위에 쌓임.4. 2~3번 조건까지 같은 경우, html의 다음 구조일 수록 위에 쌓임.#. z-index : 요소의 쌓임 정도를 지정함(position이 static이 아닐때만 반영됨)#. position 속성의 값으로 absolut..

목차   font 관련 속성들font-weight : 글자의 두깨와 관련된 속성 (대표적인 값 : (normal,400), (bold,700), bolder, lighter,100~900)#. border, lighter는 상위 요소인 부모와 비교해서 어느정도인가를 나타냄.font-size : 글자의 크기와 관련된 속성대표적인 값 : px, em, rem, %,smaller,larger, xx-small~xx-largeline-height : 한 줄의 높이, 행간과 유사대표적인 값 : 숫자, px,em, rem, %(height와 동일한 값을 넣었을 때, 가운데 정렬)font-family : 글꼴을 변경하는 속성  #lorem은 의미없는 문장을 출력해줌. 문자에 대한 속성color : 글자의 색상text..

목차 CSS 작성법  선택자 : 각각의 정의 요소들이 어떤 html 태그에 css를 적용시키는지 알려주는 지시자.속성 : 실제로 적용되는 속성의 종류이며, 여러개의 프로터피를 연속해서 지정할 수 있고, 사용자가 임의로 정의하여 사용용할 수 없다는 특징이 있다.값 : 실제로 해당 속성들에 대하여 적용되는 값을 말하며, 키워드나 크기 단위 또는 색상 등의 단위로 나타낸다.CSS 선택자#. 기본 선택자 전체 선택자 : *{color : red;}테그 선택자 : li {color: red;}c클래스 선택자 : .orange { color : red;}                          오랜지 아이디 선택자 : #orange {color : orange;}                         ..

목차  CSS란?- Cascading Style Sheet의 약어- 웹 페이지의 빼대인 html 파일의 각 테그에 디자인을 입히기 위한 언어 개발자 도구- 단축키는 F12, 브라우저에서 개발 편의를 위해 제공하는 도구- 현재 띄워놓은 페이지의 HTML, CSS, Javascript를 볼 수 있다.- 해당 코드를 수정하여 자기 마음대로 변경이 가능하나, 새로고침을 하면 서버 내의 페이지에 대한 자료는 변하지 않기에 그대로 출력된다.- HTML과 CSS를 할 때 미세한 수정을 미리 해볼 수 있기에 자주 사용된다. CSS의 참조 방식 세가지. 인라인 방식 html 테그마다 style 이란 속성값을 이용해, 일일히 표시해주는 것이다.그러나 아래와 같은 스타일을 가진 테그를 사용하려고 해도 코드를 복붙해야 해서,..

목차목차- html에서 이미지를 넣어줄 때 사용하는 태그- 속성값 중 하나인 src = "이미지의 위치"를 사용함.- 이미지가 로드되지 않을 경우, 사용자가 알 수 있도록 문구를 띄워주는 alt라는 속성값이 존재함.- alt = "이미지가 로드되지 않았습니다." - Anchor의 약자로 하나 의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용함.- 적용한 속성에는 href와 target이 존재함- 여기서, target 속성에는 _self와 _blank가 존재한다.- _self 는  현재 창에 링크를 오픈한다는 의미이다.- _black는 새 창(또는 탭)에서 링크를 오픈한다. #. 절대 경로와 상대 경로   상대 ..

KDT 포스코X코딩온 웹 풀스택 과정 14기   목차     1. 지원사유? - 보안소프트웨어, 자동차, 스마트홈 관련 QA파트 쪽에서 검증, 리뷰 관련 업무를 수행하다가 권고사직을 당한 이후, 앞으로 뭘 해먹고 살아야할지 고민하다가, 개발공부를 다시 시작했다. 컴퓨터 공학 전공인 관계로 개인적인 공부에는 큰 어려움은 없을 것 같았으나, 팀프로젝트와 면접 관련해서 고민이 생겼고, 한달 쉬면서 고민한 끝에 포스코와 코딩온에서 지원하는 웹개발자 풀스택 과정을 신청하여 합격했습니다.자세한 사항은 개발자 도전 사유 창을 참고해주세요. 수업기간 : 2024-09-05 ~ 2025-03-05 -OT-git 사용법-HTML 설명 및 실습 2023.09.05 [오리젠테이션 진행]- 자기소개 타임- 크루리더진 소개(알려..