목록공부좀 하자/HTML, CSS (17)

코딩룸*◡*

[CSS]하이브리드앱 크로스브라우징 문제(ios)

가장 최신 ios 버전 = 15 1. input, textarea 폰트 사이즈 16이하 포커스시 자동으로 zoom-in 발생 iOS에서는 input 태그나 textarea 태그의 폰트 사이즈가 16px보다 작으면 focus 시 자동으로 zoom-in이 발생합니다. meta tag에 ‘maximum-scale=1.0’ 옵션을 넣어 문서의 최대 배율 범위를 설정하면 zoom-in은 발생하지 않습니다. 그러나 구글 lighthouse 웹 접근성 지표에 감점이 적용될 수 있습니다. 2. a태그 클릭시 하이라이트 효과 생김 a태그 클릭 시 하이라이팅 효과가 발생합니다. webkit 엔진 기반의 브라우저에서 발생하는데, 전역 스타일 시트에 속성을 투명으로 적용하면 하이라이팅 효과를 제거할 수 있습니다. -webki..
공부좀 하자/HTML, CSS 2023. 6. 13. 13:42
[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] 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 Next