반응형 HTML.CSS♥29 시멘트 태그 Sementic Tag 비일관된 HTML의 문서구조와 그로 인한 정보 검색 누락을 해결한 시멘틱 태그 🔷시멘트 태그의 장점. 1.SEO(Search Engine Optimization) 의 최적화 검색엔진의 노출에 유리하다 2.웹 접근성 효율 증가 일반 웹에서는 큰 차이가 없지만 스크린 리더 같은 상황에서는 웹 접근성과 사용성을 향상시킨다 3.유지보수의 용이성 레이아웃을 같은 태그로 적용시키면 누가 유지보수를 하든 용이하게 할 수 있다 🔸기존의 방법과 시멘트 태그 위치 기존 사용하던 방법 시멘트 태그 상단 div id = header 본문 div id = container div id = contents 하단 div id = footer 네비게이션 div id = nav global navigation bar 대메뉴 local.. 2023. 8. 18. {Object-fit} 비율이 어긋난 사진 고쳐주는 속성 비율이 어긋난 사진을 고쳐주는 속성 {object-fit} 🔷"object-fit" 속성은 나 태그의 높/넓이 를 설정하여 깨진 비율과 관계 없이 예쁜 사진으로 맞춰준다. 🔸object-fit 속성과 속성값 속성 속성값 설명 object-fit fill 가로세로 비율에 관계없이 부모박스를 가득 채운다. cover 가로세로 비율을 맞추어 부모박스의 높이 넓이를 가득채우며 비율이 맞지 않을 시 비율은 유지하되 넘치는 부분은 잘려나간다. contain 가로세로 비율을 맞추어 부모박스의 높이든 넓이든 둘중 먼저 닿는 곳을 max로 잡는다. scale-down "none" 과 "contain" 중 더 작은 컨테츠 크기를 선택한다. none 컨텐츠의 크기를 조절하지 않는다. 2023. 8. 18. {text-transform} 글자를 대문자 또는 소문자로 바꾸는 속성 글자를 대문자 또는 소문자로 바꾸는 속성 {text-transform} 🔷"text-transform" 속성은 입력한 글자를 대문자 혹은 소문자로 바꿀 수 있다. 🔸text-transform 속성과 속성값 속성 속성값 설명 text-transform capitalize 단어의 첫번째 글자를 대문자로 변경 uppercase 모든 글자를 대문자로 변경 lowercase 모든 글자를 소문자로 변경 2023. 8. 13. {word-break} 텍스트의 줄바꿈을 디테일하게 정해주는 속성 텍스트의 줄바꿈을 글자 단위, 혹은 단어 단위로 정해주는 속성 {word-break} 🔷"word-break" 속성은 기본적으로 글자 단위로 줄바꿈이 이루어지는 html 의 속성에 단어단위로 줄바꿈이 이루어지도록 부여할 수 있는 속성이다. 🔸word-break 속성과 속성값 속성 속성값 설명 word-break normal CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈 break-all 글자 기준으로 줄바꿈 keep-all 단어 기준으로 줄바꿈 initial 기본값으로 설정(글자 기준 줄바꿈) inherit 부모 요소의 속성값을 상속 2023. 8. 13. 팀프로젝트(2주간) - 웹디자인 / 코딩 [4개조 중 1위] 지난 2주간 학원에서 웹페이지 디자인 시안부터 시작해서 코딩까지 마무리 하는 팀 작업을 했다.🔷프론트엔드 개발 - 팀프로젝트이번 포스팅에서는 지난 2주간 학원에서 진행한 “팀프로젝트”의 회고록을 적어보도록 하겠다. 그 중에서도 개발 과정 자체와 또 프로젝트 중 좋게 작용한 점들과 효율적으로 발전시킬 수 있는 점들 그리고 조장을 맡아 진행하며 개인적으로 잘했던 점과 발전해야할 점들을 이야기 하도록 하겠다.🔸개발 과정 1 - 기획웹 사이트를 제작하는데 가장 먼저 정해야할 주제, 테마를 정하기 위해서 팀원들과 함께 평소에 만들어 보고 싶었던 사이트의 주제를 상의했다.소모임애완용품피죤위의 주제들이 나왔고 "피죤" 사이트는 이미지를 사용한 방식들이나 레이아웃, 색감 등에서 정말 시원하게 잘 만들어진 사이트라는 생.. 2023. 8. 4. <SVG> 텍스트나 도형이 그려지는 효과 [HTML.CSS 1-24] SVG 파일을 활용하여 도형이나 텍스트가 그려지는 효과를 만들어보자. 🔷"SVG" 태그로 도형을 입력하여 그림 그리는 듯한 애니메이션을 줄 수 있다. 🔸 요소 만드는 방법 원하는 도형을 일러스트에서 그립니다. File - Export - Export As... 순으로 클릭해줍니다. 파일 형식을 SVG 로 변형해주고 Export 를 클릭합니다. Show Code 를 클릭합니다. 메모장에 뜬 svg 파일의 코드를 복사해서 VScode 에 붙혀넣어줍니다. 아래와 같이 svg 도형이 출력됩니다. 처음에 사이즈가 크기때문에 사이즈를 좀 줄입니다. fill 은 내부 색상을 정한다. stroke 는 도형의 라인의 색상을 정한다. stroke-width 는 도형 라인의 굵기를 정한다. stroke-dasharray 는.. 2023. 7. 28. 이전 1 2 3 4 5 다음 반응형
