티스토리

일상을 디자인하는 개발자
검색하기

블로그 홈

일상을 디자인하는 개발자

zito42.tistory.com/m

"机不可失，失不再来"★☆★☆ 내 인생의 황금기는 지금 ★☆○

구독자
0
방명록 방문하기
공지 개발자 이력, Github 주소 모두보기

주요 글 목록

  • [HTML+CSS] 3차원 변환 변환함수 설명 translate3d(translateX, translateY, translateZ) 특정 크기만큼 이동함 translateX(translateX) X축으로 특정 크기만큼 이동함 translateY(translateY) Y축으로 특정 크기만큼 이동함 translateZ(translateZ) Z축으로 특정 크기만큼 이동함 scale3d(scaleX,scaleY,scaleZ) 특정크기 만큼 확대 및 축소함 scaleX(scaleX) X축으로 특정 크기만큼 확대 및 축소함 scaleY(scaleY) Y축으로 특정 크기만큼 확대 및 축소함 scaleZ(sclaeZ) Z축으로 특정 크기만큼 확대 및 축소함 rotate3d(angleX, angleY, angleZ) 특정 각도만큼 회전 rotateX(.. 공감수 0 댓글수 0 2021. 10. 5.
  • [HTML+CSS] 2차원 변환 ▶ 보통은 컴퓨터 프로그램 화면 좌표를 가로는 x축 세로는 y축이며 왼쪽 위에 위치하는 점이 영점으로 볼 수 있다. 여기에 z축을 추가 하면 3차원 화면 좌표로 확장이 되는 것 입니다. 간단한 예시를 보겠습니다. See the Pen by yeojinho (@yeojinho) on CodePen. ▶ 2차원 변환 함수 변환 함수 설명 translate(translateX, translateY) 특정 크기 만큼 이동함 translateX(transrateX) X축으로 특정 크기 만큼 이동 translateY(transrateY) Y축으로 특정 크기 만큼 이동 scale(scaleX,scaleY) 특정 크기만큼 확대 및 축소 scaleX(scaleX) X축으로 특정 크기 만큼 확대 및 축소 scaleY(sc.. 공감수 0 댓글수 0 2021. 10. 5.
  • [HTML+CSS] 키 프레임과 애니메이션 속성 ex) animation 속성 설명 animation 모든 animation을 한 번에 적용 animation-delay 이벤트 발생 후 몇 초 후에 재생할지 지정 animation-direction 애니메이션 진행 방향 설정 animation-duration 애니메이션 몇 초 쓸지 지정 animation-timing-function 수치 변형 함수를 지정 animation-play-state 애니메이션 재생 상태를 지정 animation-iteration-count 애니메이션 반복 횟수를 지정 animation - name 애니메이션 이름을 지정 예시) See the Pen by yeojinho (@yeojinho) on CodePen. ▶ animation-direction 속성 ▶ animation.. 공감수 0 댓글수 0 2021. 10. 5.
  • [HTML+CSS] 애니메이션 (변형 속성) ▶ 애니메이션 속성에는 애니메이션 속성과 변형 속성으로 나뉜다. 가장 기본적인 예시를 보면 See the Pen by yeojinho (@yeojinho) on CodePen. 출력된 결과물 오렌지 사각형에 마우스를 올려두면 애니메이션이 구현이 됨을 알 수 있다. 속성 설명 transition 모든 transition 속성을 한 번에 사용함 transition-delay 이벤트 발생 후 몇 초후에 재생할지 지정 transition-duration 몇 초 동안 재생할지 지정 transition-property 어떤 속성을 변형할지 지정 transition-timing-function 수치 변형 함수 지정. 또다른 예시를 들어 보겠습니다. See the Pen by yeojinho (@yeojinho) on.. 공감수 0 댓글수 0 2021. 10. 1.
  • [HTML+CSS] text-shadow 속성 text-shadow 속성은 글자에 그림자를 부여하는 스타일 속성임. ▶ text-shadow 구성은 text-shadow : 5px 5px 5px black (오른쪽)(아래)(흐림도)(색상) ▶ box-shadow 구성은 box-shadow : 5px 5px 5px black (오)(아래)(흐림도)(색상) ex) text-shadow & box-shadow See the Pen by yeojinho (@yeojinho) on CodePen. 공감수 0 댓글수 0 2021. 10. 1.
  • [HTML+CSS] overflow 속성 , float속성 ▶ overflow는 내부의 요소가 부모의 범위를 벗어 날 때 처리하는지 여부에 대한 속성임. 키워드 설명 hidden 영역을 벗어나는 부분을 보이지 않게 만듬 scroll 영역을 벗어나는 부분을 스크롤로 만듬. ▶ flot은 부유하는 대상을 만들 때 사용하는 스타일 속성임. 키워드 설명 left 태그를 왼쪽에 붙임 right 태그를 오른쪽에 붙임 1 .float 속성을 사용한 레이아웃 구성 ▶ float속성을 사용하는데 있어서 꼭 알아될 공식이 있는데 그 공식은 "자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용함" See the Pen by yeojinho (@yeojinho) on CodePen. 현재 사용 된 방법을 'One True Layout' 방식이라.. 공감수 0 댓글수 0 2021. 10. 1.
  • [HTML+CSS] 위치 속성 ▷ 프로그램 개발시 요소 위치는 2가지 방법으로 함 1. 절대 위치 좌표 : 요소의 X 좌표와 Y좌표를 설정하여 절대 위치를 지정 2. 상대 위치 좌표 : 요소를 입력한 순서를 통해 상대적으로 위치를 지정 1. position 속성 HTML 태그의 위치 설정 방법을 변경 할 때는 position속성을 사용함. position 속성에 사용 가능한 키워드 키워드 설명 static 태그가 위에서 아래로 순서대로 배치 relative 초기 위치 상태에서 상하좌우로 위치 이동 absolute 절대 위치 좌표 설정 fixed 화면을 기준으로 절대 위치 좌표를 설정 ex) See the Pen by yeojinho (@yeojinho) on CodePen. 2. 위치 속성과 관련된 공식 1. position속성에 a.. 공감수 0 댓글수 0 2021. 10. 1.
  • [HTML+CSS] 폰트 속성 폰트는 글자와 관련된 스타일 속성을 말함. 1. font-size ▶ font-size 속성은 글자의 크기를 지정하는 스타일 속성으로 대표적인 단위로 "px, rem , em" 등을 사용합니다. See the Pen by yeojinho (@yeojinho) on CodePen. 2. font-family 속성 ▶ font-family 속성은 폰트를 지정하는 스타일 속성 3. font-style 속성과 font-weight 속성 ▶ font-style 속성, font-weight 속성은 폰트의 기울기 or 두께를 조정하는 속성임. 4. line-height 속성 ▶ line-height는 글자의 높이를 지정하는 속성 See the Pen by yeojinho (@yeojinho) on CodePen. 5.. 공감수 0 댓글수 0 2021. 10. 1.
  • [HTML + CSS] 테두리 속성 1. border-width 속성 , border-style 속성 border-width 속성의 경우 테두리의 너비를 지정하는 스타일 속성이다. border-style 속성은 테두리의 형태를 지정하는 속성이다. 테두리를 넣을 때 둘다 사용하는 것이 좋다. See the Pen by yeojinho (@yeojinho) on CodePen. 위의 예시는 .box에 대한 테두리 속성을 직접 다 입력했지만 이를 한번에 작성 가능합니다. 또한 border 속성은 margin 속성, 그리고 padding 속성처럼 left, top , right, bottom 각각 의 값을 적용할 수 있다. 2. border-radius 속성. border-radius 속성을 통해 테두리의 모양을 변경할 수 있습니다. See th.. 공감수 0 댓글수 0 2021. 10. 1.
  • [HTML+CSS] 박스 속성 박스 속성은 web page layout을 구성하는데 있어서 매우 중요한 요소 입니다. 1. width 속성과 height 속성 width속성 height 속성은 글자를 감싸는 영역의 크기를 지정하는 속성이다. ex) See the Pen by yeojinho (@yeojinho) on CodePen. 2. margin 속성과 padding 속성 ★ 개인적으로 아직도 슬때마다 헷갈리는 속성이기도 한부분이다 margin 속성은 마진의 너비를 지정하는 속성, padding은 패딩의 너비 속성. 이라고 보시면 될 것 같습니다. ex) See the Pen by yeojinho (@yeojinho) on CodePen. 또한 margin의 중요한 속성으로는 "각각의 너비를 별도로 지정 할 수 있다는 것 입니다... 공감수 0 댓글수 0 2021. 10. 1.
  • [HTML+CSS] display display에 속성에 진짜 많은 기능들을 지원하지만 그중에서도 가장 중요한 display 속성에 대해 알아보겠습니다. 키워드 설명 none 태그를 화면에서 보이지 않게함 block 태그를 block 형식으로 지정 inline 태그를 inline 형식으로 지정 inline-block 태그를 inline-block 형식으로 지정 1. See the Pen by yeojinho (@yeojinho) on CodePen. 2. See the Pen by yeojinho (@yeojinho) on CodePen. 3. / 현재의 상태에서는 inline키워드와 inline-block 키워드사이에 값을 동일 하게 출력이 됩니다. 그렇다면 inline 과 inline-block에 대해 차이는 없을까 ? 했을 때 당연.. 공감수 0 댓글수 0 2021. 9. 29.
  • [HTML+CSS] 구조 선택자, 형태 구조 선택자, 문자선택자 , 반응 문자 선택자 선택자 설명 :first-child 형제 관계 중에서 첫 번째에 위치하는 태그를 선택 :last-child 형재 관계 중에서 마지막에 위치하는 태그를 선택 :nth-child(수열) 형제 관계 중에서 앞에서 수열 번째에 태그를 선택 :nth-last-child(수열) 형제 관계 중에서 뒤에서 수열 번째에 태그를 선택 See the Pen by yeojinho (@yeojinho) on CodePen. 선택자 설명 :first-of-type 형제 관계 중에서 첫 번째로 등장하는 특정 태그를 선택함 :last-of-type 형제 관계 중에서 마지막으로 등장하는 특정 태그를 선택함 :ntn-of type(수열) 형제 관계 중에서 앞에서 수열번재로 등장하는 특정 태그 선택 :ntn-last-of-type(수열).. 공감수 0 댓글수 0 2021. 9. 29.
  • [HTML+CSS] 반응 선택자 , 상태 선택자 ▶ 반응 선택자는 사용자의 반응으로 생성되는 특정한 상태를 선택하는 선택자임 마우스를 올리면 hover가 적용, 클릭하면 active가 적용됨. 선택자 형태 설명 :active 사용자가 마우스로 클릭한 태그를 선택 :hover 사용자가 마우스를 올린 태그 선택 ex_반응 선택자 See the Pen by yeojinho (@yeojinho) on CodePen. ▶ 상태 선택자 ▶ 상태 선택자는 입력 양식 상태를 선택할 때 사용하는 선택자. 선택자 설명 :checked 체크 상태의 input 태그를 선택 :focus 초점이 맞추어진 input 태그를 선택 :enabled 사용 가능한 input태그를 선택 :disabled 사용 불가능한 input 태그를 선택 ex_상태 선택자 See the Pen by .. 공감수 0 댓글수 0 2021. 9. 28.
  • [HTML+CSS] 기억하면 좋은 CSS 선택자 (Selector) (2) 1. 기본 속성 선택자 1). 선택자[속성=값][속성=값] ▶ 특정한 속성 안의 값이 특정 값과 같은 문서 객체를 선택함. See the Pen by yeojinho (@yeojinho) on CodePen. 2. 문자열 속성 선택자 선택자 형태 설명 선택자[속성*=값] 속성 안의 값이 특정값을 포함하는 태그 선택 선택자[속성$=값] 속성 안의 값이 특정 값으로 끝나는 태그를 선택 선택자[속성^=값] 속성 안의 값이 특정 값으로 시작하는 태그를 선택 선택자[속성|=값] 속성 안의 값이 특정 값을 단어로 포함하는 태그 선택 선택자[속성~=값] 속성 안의 값이 특정 값을 단어로 포함하는 태그 선택 See the Pen by yeojinho (@yeojinho) on CodePen. 공감수 0 댓글수 0 2021. 9. 28.
  • [HTML+CSS] 기억하면 좋은 CSS 선택자 (Selector) (1) 1 .# (Selector) #flex { width: 50px; margin : auto; } ▶id선택자이다. (# + 선택자) 의 형태로 id 값을 적용 대상으로 삼으며 , id 사용할때 중요한것은 class와 다르게 한페이지에서 한번만 사용이 가능합니다. 또한 class와의 우선순위는 id>class>태그 순으로 적용된다는점을 알아야 함. 2. .(className) .btn { color : blue; } ▶ Class선택자이다. id와 class의 차이라면 class는 선택자의 대상이 여러개의 요소가 가능하며 자주 사용하는 선택자를 사용하는데 많이 쓰인다. 스타일의 한그룹에 적용할 시에는 class를 사용하는 것이 좋다. 3. * * {margin: 0; padding : 0;} ▶ *의 경우.. 공감수 0 댓글수 0 2021. 9. 28.
  • [HTML+CSS] 가상의 선택자 ▶ 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 합니다. 그중에서 아래에 있는 예시는 가장 많이 사용하고 있는 가상클래스에 대한 정보 입니다. :first - 첫번째 요소 :last - 마지막 요소 :first-child - 첫번째 자식 :last-child - 마지막 자식 :nth-child(2n+1) - 홀수 번째 자식 :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :hover - 마우스를 롤오버 했을 때 :active - 마우스를 클릭했을 때 :focus - 포커스 되었을 때 (input 태그 등) ▶ 사용법 선택자 : 가상 이벤트 ▶ 예시 See the Pen by yeojinho (@yeoj.. 공감수 0 댓글수 0 2021. 9. 28.
  • [ HTML+CSS] 부모 자식 선택자 하위에 있는 태그들은 서택하고 싶을 때 부모 자식 선택자의 형태를 통해 값을 줍니다. ▶ 부모 자식 선택자. ▶ 조상 자손 선택자 . ▶중복된 값에 대한 선택자 적용 전체의 값이 적용된 예제 확인 See the Pen Selector by yeojinho (@yeojinho) on CodePen. 공감수 0 댓글수 0 2021. 9. 28.
  • [HTML+CSS] 선택자와 선언 (Selctor & Declation) ▶ CSS Selector 어떤 태그를 디자인 하려면 위의 보기와 같이 선택자(Selector)를 선택하고 , 선택한 대상에게 값을 부여해야함 (선언) See the Pen by yeojinho (@yeojinho) on CodePen. 공감수 0 댓글수 0 2021. 9. 28.
  • [HTML + CSS] CSS란? CSS란? -> 꾸미기 위한 언어. HTML이 없으면 CSS를 이용을 할 수가 없다. 그러므로 HTML을 잘 알아야함 그러면 HTML이란 무엇인가? -> 전자 출판을 하기 위한 용어라고 보면 된다 하지만 시간이 지남에 따라 Web Page의 디자인에 대한 신경을 쓰기 시작함 정보 + 디자인에 대한 것을 의식하고 정보와 디자인을 구분하여 코드를 작성하기 시작함. ex) 정보로서만 가치를 가지고 있음. HTML CSS JavaScript " 지금부터 CSS 언어가 나오니까 CSS문법에 따라 해석하시오 " //스타일 태그로 시작해서 스타일 태그로 닫힘 EX) 를 변환을 해보면 다음 포스팅 부터는 본격적으로 HTML 그리고 CSS에 대해서 알아 보겠습니다. 공감수 0 댓글수 0 2021. 9. 28.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.