본문 바로가기

CSS7

text-overflow:ellipsis display: block;width: 120px;white-space: nowrap;overflow: hidden;text-overflow:ellipsis; white-space:nowrap; 넓이를 지정하였더라도 자동으로 줄바꿈되지 않게 강제로 개행을 막아줌. word-break:break-all;문장을 띄어쓰기 할때 쓰인 공백기준이 아닌 문자단위로 끊어주는 속성 text-overflow:ellipsis;텍스트가 넘칠때, 말줄임표( ... )가 나오게 하는 속성, 적용조건 white-space:nowrap;[출처] white-space:nowrap;, word-break:break-all;, text-overflow:ellipsis;|작성자 달콤쌉쌀 긴 글자 생략하기 Semina.... 이런식으로 나.. 2013. 3. 5.
[CSS] overflow, position, flow * overflow : 엘리먼트의 내용이 영역을 넘는 경우에 표시 방법 설정 - hidden : 영역을 넘는 내용은 표시하지 않음 - scroll : 영역에 스크롤 표시 예) 동해물과 백두산이 마르고 닳도록...(생략) 남산 위에 저 소나무 철갑을 두른듯....(생략) * position : 영역의 위치 이동 - relative : 영역의 원래 위치에서 지정된 값 만큼 이동. 예) 아래에서 보는 바와 같이 첫 번째 영역은 원래 위치에서 우측 하단으로 각각 100px 이동하였지만, 두 번째 영역은 첫 번째 영역이 이동하기 전의 영역에만 영향을 받고 있음. * flow : 영역을 지정된 위치로 이동시킴, 해당 영역은 다른 엘리먼트의 흐름에서 제외됨. 그러나, 다른 엘리먼트의 내용을 가리지 않음 예) 아래에서.. 2012. 11. 30.
table 태그와 자손 선택자 주의사항 table 태그의 요소를 선택할 때는 자손 선택자를 사용하는 것이 좋지 않다. Name Region OTEP 서울 코드를 실행하면 아래와 같이 실행된다. 대부분 th 태그에 빨간색이 적용되는 것으로 예상했을 테지만, 실제로는 스타일 속성이 적용되지 않는다. 이 문제는 요소 검사를 사용해 HTML 페이지의 계층 구조를 살펴보면 원인을 알 수 있다. table 태그에 tbody 태그가 자동으로 추가되어 table>tbody>tr>th 선택자를 사용해야 색상을 적용할 수 있다. 소스코드와 실행결과가 달라 혼동되므로 table 선택자에 스타일을 적용할 때는 자손 선택자를 사용하지 않는게 좋다. 2012. 11. 30.
클릭시 원하는 부분으로 이동 / 링크에 타이틀 추가 목적지를 생성하기 위해 엘리먼트 사용하기 : 목적지 앵커(Destination Anchor)index.html 파일에 작성되었다고 가정하겠습니다. [목적지 앵커설정] 골로 이동하자!! [목적지 설정] 이동되야할 곳 골로 이동하자!! 를 클릭했을시 id가 goal로 설정된 곳으로 이동하게 됩니다. (같은 html 파일 내이든, 다른 html 이든) id는 항상 문지(A-Z,a-z)로 시작하고, 그 뒤는 어떤 문자나, 하이픈, 밑줄 콜론, 기간문자(..), 소수점 등이 올 수 있다. 공백 사용 불가능 링크에 타이틀을 추가하기 링크에 마우스를 올려놓았을때 링크에 대한 설명이 뜨게 합니다. GOAL 마우스를 올려놨을때 링크라벨은 간결하고, 의미있게 만들어야 한다. 2012. 5. 9.