Front end/CSS9 트랜지션과 애니메이션 속성 모음 최근 시험기간이기도 하고 학교 공부에 집중하다보니 블로그에 너무 소홀했던 것 같다. 처음에는 별로 나에게 도움이 되지 않을 줄 알았었던 과목도 이번 단원을 통해 다시 한 번 되짚어볼 수 있었고, 아는 내용이 나와 신기하기도 했었다. css 함수 중 rotate()와 skew()함수는 모두 학교에서 배운 Homogeneous Transformation 과 연관이 있었고, 평소같았으면 그냥 함수의 사용법만 알고 넘어갔을 단원도 그 함수가 어떻게 작동하는지와 같은 비교적 깊은 생각도 할 수 있었다. 트랜스 폼(transform) : 요소의 형태를 변형하거나 위치를 변경하는 것 사용법 : transform: 변형함수 2차원 변형함수 translate(tx,ty) : 지정한 크기만큼 x축 y축으로 이동 trans.. 2022. 12. 18. CSS 고급선택자 (속성 선택자) 속성 선택자의 기본 개념은 해당 속성이 있는 요소를 선택하는 것이다. 예를 들어 a 태그 여러개를 만들어 여러 속성을 부여했는데 그중에 text-decoration이 none인 속성을 가진 것들을 선택하고 싶을 때 사용할 수 있다. 속성선택자 사용법은 대괄호 안에 원하는 속성을 입력해서 사용한다. a[href] { color : #fff; } 다음 코드는 a태그중에 링크가 있는 요소만 선택하는 코드이다. a 태그더라도 href가 없다면 선택되지 않는다. 특정 속성 선택자 특정 속성 선택자는 속성의 속성값까지 일치해야 선택하는 선택자이다. 사용법은 [ 속성 = 속성값 ] 이다. a [target = _blank]{ background: url(...) } 위 코드는 a태그의 target 속성이 _blank.. 2022. 11. 4. CSS 고급 선택자 (연결 선택자) 선택자란 내가 어떤 요소에 css 효과를 넣을지 결정하는 방법이다. 사실 이번 단원은 딱히 특별하거나 신기한 효과를 배우지 않아 대충 공부하고 다음 단원으로 넘어갔다가 T스토리 클론 코딩을 하며 이 단원의 중요성을 알게되었다. 많은 요소중에 내가 원하는 요소만을 선택한다는게 처음에는 쉽다고 생각할 수 있겠지만, 생각처럼 내 맘처럼 되지않아 고생해본 후에 공부하니 한결 이해가 빨랐다. 개념 css는 부모와 자식 요소가 존재한다. 특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 하며 한 단계 아래인 요소를 자식 그 아래를 손자로 표현한다. 또한 같은 위치에 있는 요소를 형제 요소라고 하고 형제요소중 먼저 나온 요소를 형, 나중에 나온 요소를 동생으로 표현한다. 다음은 이해를 돕기 위한 코드이다. .. 2022. 11. 3. 이미지와 그라데이션 효과로 배경 꾸미기 이번 단원에서는 배경 이미지와 그라데이션 효과를 줄 수 있는 속성에 대해 배웠다. 배경 이미지는 웹을 만들 때 많이 사용되는 요소이고 눈에 가장 먼저 띄는 요소이기 때문에 집중해서 공부했다. 그런데 background - clip 속성과 background - origin 속성의 차이점을 모르겠다. 책에서는 배경 이미지의 적용 범위를 나타내는 속성이라고 나와있는데 둘 다 옵션도 같은것 같아 어떤 상황에서 어떤 속성을 써야하는지 다시 찾아봐야겠다. + 수정 ) clip은 배경색의 범위를 지정하는 속성이고 origin은 이미지를 지정하는 속성 배경색을 지정하는 속성 - background-color : 요소의 배경 색을 지정하는 속성. rgb값이나 16진수 또는 색상이름을 사용해서 지정 배경색의 적용범위를 .. 2022. 10. 2. 레이아웃을 구성하는 css 박스모델 (2) 배치 방법을 결정하는 속성 - display : 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있게 함. 네비 속성에서 메뉴 항목을 가로로 배치하거나 이미지를 표 형태로 배치할 수 있게 함 종류 설명 block 인라인 레벨 요소를 블록 레벨 요소로 만든다 inline 블록 레벨 요소를 인라인 레벨 요소로 만든다 inline-block 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있다, none 해당 요소를 표시하지 않음 좌우 배치를 결정하는 속성 - float : 특정 요소를 왼쪽이나 오른쪽에 고정하는 속성. 이 때 요소를 배치한 후 다른 요소와 적당한 간격을 유지하고 싶다면 margin속성을 이용해 조절할 수 있다. - clear : float.. 2022. 9. 11. 레이아웃을 구성하는 css 박스모델 (1) 처음에는 웹을 만들 때 웹을 큰 하나의 화면으로 보고 모든 요소를 그 위치에 맞게 조절해야 하는 줄 알았는데 사이드바, 본문 푸터등 큰 틀을 먼저 잡아서 하나의 큰 화면을 만든다는 것을 알았다, 이 전에도 헤더 푸터와 같은 내용을 배웠지만 그걸 구현하는 방법을 몰랐었는데 다시 한 번 짚고 넘어가니 쉽게 이해할 수 있었다. 또한, 패딩과 마진같은 테두리 안에 있는 용어에 대해서도 다시한번 생각해 볼 수 있었다. 박스모델 - 블록 레벨 요소 : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것 (가로로 100%) - 인라인 레벨 요소: 태그의 콘텐츠만큼만 영역을 차지하며 다른 요소가 올 수 있음 (가로로 해당 크기만큼) 박스 모델의 기본 구성 - 콘텐츠 영역 (content) - 패딩 (paddi.. 2022. 9. 9. 이전 1 2 다음
