My Space

반응형

Development/CSS → (5)건

  1. 그리드 (링크)
    2021.11.17
  2. 글자수가 길때 줄바꿈이 안되는 경우 2
    2021.10.14
  3. background 속성
    2021.10.05
  4. li태그 n 번째 요소 고르기(링크)
    2021.10.05
  5. before, after
    2021.10.04

그리드 (링크)

https://studiomeal.com/archives/533 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “ studiomeal.com
Development/CSS 2021. 11. 17. 16:51

글자수가 길때 줄바꿈이 안되는 경우

word-break 옵션을 추가한다. - 텍스트가 들어가는 블록 요소에서 단어 단위로 줄 바꿈할지, 글자 단위로 줄바꿈 할지를 정하는 속성 1. word-break: normal word-break의 기본값으로 한글은 글자 단위, 영어는 단어 단위로 줄바꿈 한다. 우측 공간이 듬성듬성 비게 될 가능성이 있다. 2. word-break: break-all; 한글, 영문 모두 글자 단위의 줄바꿈을 한다. 반응형 웹을 고려할때 가로길에 맞게 줄바꿈이 되어 미관상 적합하다. 3. word-break: keep-all; 한글, 영어 모두 단어 기준으로 줄바꿈한다.
Development/CSS 2021. 10. 14. 12:15

background 속성

button등에 이미지를 줄 수 있는 background는 background와 background-img 속성이 있다. background-img는 각 속성들을 따로 지정할 수 있고, background는 한번에 지정 가능하다. 예제 코드 //background-image 방식 body { background-image: url("/test/images/img01.png"); background-repeat: no-repeat; //이미지 반복 no background-position: 100px 200px; } //background 방식 body { background: #FFCCCC url("/test/images/img01") no-repeat center 0px; } ※ 참 고 backgrou..
Development/CSS 2021. 10. 5. 22:12

li태그 n 번째 요소 고르기(링크)

https://verdana1012.tistory.com/entry/CSS3-nthchildn-%EC%84%A0%ED%83%9D%EC%9E%90-%EA%B0%99%EC%9D%80%EC%A2%85%EB%A5%98%EC%9D%98-%ED%83%9C%EA%B7%B8%EB%A1%9C-%EA%B5%AC%EC%84%B1%EB%90%98%EC%96%B4-%EC%9E%88%EC%9D%84-%EB%95%8C-%EC%82%AC%EC%9A%A9 CSS3 :nth-child(n) 선택자 (같은종류의 태그로 구성되어 있을 때 사용) CSS3에서는 :nth-child(n) 선택자를 사용하여 여러 개의 항목이 일렬로 나열되어 있는 경우, class나 id를 사용하지 않고 스타일을 지정할 항목이 몇 번째에 있는지 따져서 스타일을 적..
Development/CSS 2021. 10. 5. 15:46

before, after

W3C 스펙에서 ::before - 실제 내용 바로 앞에 생성되는 자식요소 ::after - 실제 내용 바로 뒤에 생성되는 자식요소 라고 일컷는다. 이 두가지를 사용하기 위해서는 만드시 content="" 라는 속성이 필요하다. 안녕하세요 결과 before, after은 inline형태로 되며, 특성상 width, height가 먹지 않고, padding/margin은 좌우 영역만 조절된다. 즉, 앞에 붙는다 - 안녕하세요 - 뒤에 붙는다. 위와 같이 div 앞뒤로 inline 속성인 span이 붙는거와 같다
Development/CSS 2021. 10. 4. 18:50
◀ 1 ▶
반응형
loading

티스토리툴바