목록전체 글 (53)

코딩룸*◡*

[CSS]반드시 알아야하는 CSS 사용 tip!

1. * 사용을 지양하라! 브라우저에 과부하게 걸리고 사용하기에 적절하지 않기 때문에 사용을 지양합니다. 단, font-famaily는 *에 줘도 무방합니다. 2. id 선택자인 # 사용을 조심스럽게! id 선택자는 유연성이 없고 재활용할 수 없습니다. 그래서 가능한 처음에 태그명이나 새로운 HTML 요소 중 하나 또는 가상 클래스라도 적어서 CSS를 작성해보세요. 3. :visited와 :link 사용 - :visited 클릭했었거나 방문했던페이지에 있는 앵커 태그 - :link 클릭하기 전 상태의 앵커태그 전체 4. 인접선택자 +를 사용 - ex) ul + p { } - 앞의 요소 바로 뒤에 있는 요소만 선택합니다.
공부좀 하자/HTML, CSS 2019. 4. 30. 17:44
[CSS] SASS↔CSS 변환 사이트

SASS를 이용한 작업을 하다가 CSS로 변환할 필요가 생겨서 변환사이트를 찾게 되었습니다. *SASS에서 → CSS로 변환 https://www.sassmeister.com/ SassMeister | The Sass Playground! SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading... www.sassmeister.com *CSS → SASS 또는 SCSS로 변환 http://css2sass.herokuapp.com/ css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code CSS (paste your CSS code and conver..
공부좀 하자/JavaScript 2019. 4. 25. 15:07
[CSS] table 테두리 간격 없애기

테이블을 만드는데 border 속성을 주지 않았는데도 사이사이 간격이 있어서 그 해결방법을 찾아보게 되었습니다. 결론 : table에 {border-collapse: collapse;}를 준다. - 셀 테두리 선을 겹쳐서 표현 - 기본속성은 {border-collapse: seperate;} : 셀 테두리 선을 겹쳐서 표현 border-collapse: separate (default): 이름 나이 철수 13 영희 13 border-collapse: collapse: 이름 나이 철수 13 영희 13
공부좀 하자/HTML, CSS 2019. 4. 4. 17:14
[HTML] SVG(Scalable Vector Graphic)이미지

*SVG (Scalable Vector Graphic)이미지란?: 확장이 가능한 백터 그래픽 즉, 확대를 해도 깨지지 않는 이미지입니다. *SVG 장점- 스타일 수정이 쉽습니다.- XML 기반의 문서여서 사용하기 편리합니다.- 애니메이션이나 CSS효과를 적용할 수 있습니다. *SVG 사용법사용법은 크게 3가지가 있습니다. 1) SVG 파일 다운 후 이미지 태그를 사용해서 넣어주는 방법ex) 2) SVG 소스를 그대로 웹 문서에 삽입해주는 방법ex) ... 3) SVG 이미지를 더블클릭해서 F12번 누르면 나오는 태그를 복사해 붙이는 방법html의 원하는곳에 붙여넣기 하면 됩니다. *SVG 스타일 수정법- 색상은 "fill:#fff;"- 원하는 부분에 클래스를 지정해주어서 변경도 가능 (hover시 색상 ..
공부좀 하자/HTML, CSS 2019. 3. 21. 17:21
[CSS] transition 속성

1. transition(트랜지션 기본) 속성: transition : width 1s;- CSS스타일 + 시간 2. transition-timing-funciton(트랜지션 타임) 속성:- 변화의 중간 과정에서 움직임이 어떻게 계산되는지를 정합니다. 1) linear : 직선처럼 처음부터 끝까지 일정한 속도로 진행2) ease : 처음엔 천천히, 점점 빨라졌다가 다시 천천히3) ease-in : 전환이 천천히 시작4) ease-out : 전환이 천천히 끝남5) ease-in-out : 천천히 시작되고 천천히 끝남6) cubic-bezier(n,n,n,n) : 사용자가 정의한대로 진행 3. transition-delay 속성: 효과 지연시간- 전환 효과가 나타나기 전까지 지연시간을 설정하는것 / 이 시간..
공부좀 하자/HTML, CSS 2019. 3. 19. 12:37
UI (User Interface) / UX (User Experience)

UI (User Interface) : 사용자가 직면하다.- 쉽게 말해서 사용자가 사이트나 앱을 사용할 때 마주하는 디자인, 레이아웃과 같은 구성요소들 즉, 시각적인 구성 등을 말합니다. ▶ 좋은 UI는 다양한 사용자가 사용하는데 편리하고 높은 만족도를 가져야하며 불만족을 최소화 시켜야 합니다. UX (User Experience) : 사용자가 경험하는 전반적인 정보- 사용자가 사이트나 앱을 실행하고 이용하면서 겪을 수 있는 경험을 말합니다.(전반적인 구성) ▶ 모바일 앱에 무엇이 담겨야 할지 전반적으로 구상하고 정보를 수집하여 설계하는것이 UX디자인입니다. 좋은 UX는 통계자료 및 데이터를 바탕으로 설계 되어야 합니다. UI vs UX 무엇이 더 중요한가?- 결론은 둘다 중요합니다. UI와 UX는 서로..
공부좀 하자/HTML, CSS 2019. 3. 12. 13:02
Prev 1 2 3 4 5 ··· 9 Next