본문 바로가기
반응형

CSS

 (7)
CSS transform 그리기 기본 직선 See the Pen rNyOyWK by Redbin (@hongjeongmin) on CodePen. translate 적용 translate(X, Y)는 X축 Y축으로 이동하는 방법이다. %로 접근시 x축 y축 길이의 비율만큼 접근합니다. See the Pen MWpapJV by Redbin (@hongjeongmin) on CodePen. scale scale(x,y) x축 y축으로 확대시키는 방법이다. See the Pen abJvpQG by Redbin (@hongjeongmin) on CodePen. rotate rotate(x deg) x각도만큼 회전 See the Pen abJvpQG by Redbin (@hongjeongmin) on CodePen. skew skewX, ske..
css 커스텀 underLine , 줄바꿈 커스텀 위와 같은 언더라인을 CSS의 linear-gradient를 사용해서 적용시킨다. developer.mozilla.org/ko/docs/Web/CSS/linear-gradient() linear-gradient - CSS: Cascading Style Sheets | MDN CSS linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다. 함수의 결과는 의 특별한 종류인 자료형입니다. developer.mozilla.org CSS linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다. 함수의 결과는 의 특별한 종류인 자료형입니다. strong이라는 태그에서 linear-gradient를 이용해 ..
CSS 말줄임 후 더보기 버튼 (React) 3줄 말줄임후 자세히 보기 버튼을 활성화 시킬려고 한다. 처음에는 CSS와 padding으로만 해결하려 했지만 잘되지 않았다. 인스타그램 PC버전을보니 인스타에서는 Js로 글자수를 카운팅햇허 줄이는 방법을 활용한다. {/* [D] span.text 3줄 이상일시 짜르고 span.moreButtonWrap 추가.*/} {text.substring(30)} {text.length > 30 && ( {"···"} 자세히 보기 )} moreButtonWrap은 {text}가 일정숫자 이상일 때 subString을 이용해서 자르고 moreButton을 활성화 시킨다. (간단하게는 이런식으로 접근하고 width 넓이에 따른 fontSize를 계산해서 몇글자에서 말줄임을 해야할지에대한 수식을 세우면 될거같다.) 분명..
css 이미지 비율로 유지하기 원본유지 이미지 CSS 작업을 하다보면 원본의 이미지 비율을 그대로해서 높이와 넓이를 설정해야할 때가 있습니다. 그럴때 를 사용하게 된다면 어려움이 발생합니다. % 나 vw속성을 이용해서 설정합니다. 이때 height대신 padding을 사용하여 높이를 설정할 수 있습니다. 단위 % padding-top = n % 비율 a:b 유지 => (b/a)*100 % ex ) 16:9 비율 적용 => (9/16) * 100 =56.25% .child { background: url('http://url) no-repeat top center; background-size: cover; padding-top: 56.25%; // 16:9 비율 => (9/16)*100=56.25 } 원본유지 .image { min-..
HTML , CSS 깔끔하게 작업하기(Tip) UI/UX 작업을 하다보면 혼자하면 상관없지만 다른 사람과 공동으로 작업할 경우..시멘틱한 태그를 사용하지 못하고 깔끔한 코드를 만들 수가 없습니다. 내가 자주 실수하고 대충 했던 작업들에 대해서 피드백을 만들려고 합니다.아래 내용은 주관적인 저의 Tip입니다 (멘토 분들에게 피드백 받은 내용을 토대로 구성하였습니다.) 1. 태그 선택자는 위험하다.다음과 처럼 태그 선택자를 사용해서 속성을 주는것은 매우 위험한 일입니다. class 선택자를 이용해서 작업을 해주세요p , h1, mark{ color : red; } 2. body안에 바로 h1태그를 사용해서 작업을 해도 좋지만 태그를 이용해서 한번 감싸주면 스타일을 적용할 때 좋습니다. 3. 작업을 하다보면 태그안에 태그를 사용하는데 꼭 이 태그를 사용하..
시멘틱 마크업 간단한 정리 예제 콘텐츠 모델 HTML5에는 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들이 있습니다. 요소는 이 규칙들을 준수해야 하며, 반드시 HTML 권고안을 따라야 합니다. 이런 규칙에 대해 비슷한 성격의 요소들끼리 그룹화한 것이 콘텐츠 모델이며, 각각의 요소들은 하나 또는 여러 개의 콘텐츠 모델에 속하게 됩니다. Content Models 의 7분류 Metadata Content (style, title, script) Flow Content (a, address, sub, table) Sectioning Content (article, aside, nav, section) Heading Content (h1, h2 ,h3 ...) Pharsing Content (텍스트 또는 문단 내부 레벨로 ..
반응형 웹사이트 구현 (flex) 깃 주소 github.com/Hongjeongmin/workspace/blob/master/Css/documnet/basic.md Hongjeongmin/workspace Contribute to Hongjeongmin/workspace development by creating an account on GitHub. github.com
반응형

티스토리툴바