front/HTML_CSS4 HTML / CSS 미션 후기 HTMl / CSS 를 공부하면서 느낀점 처음 HTML / CSS 강의를 들으면서 생각이 들었던건 태그 종류나 속성들이 너무 방대하다는 것이였다. 이걸 어떻게 다 외우고 사용하지? 라는 생각에 막막하였지만 막상 공부를 진행하다보니 그럴 필요가 없었다. 태그나 속성을 다 외우고 사용하기보다는 어떤 기능을 가진 태그가 있다는 내용만 알면 필요할 때마다 찾아서 사용하면 되기 때문이다. 그리고 과제를 진행하면서 요구사항을 맞추면서 완성하다보니 여러 기능들을 사용해 보면서 점점 실력이 늘어가는걸 느꼈다. HTML / CSS 공부하면서 가장 어려웠던 개념과 이유 화면 레이아웃을 맞추는게 가장 어려웠다. 아직 어떤 방식이 효율적인 방식이 잘 모르겠고 내가 한 방식이 맞게 한건지 계속 의문이 들었다. width나 he.. front/HTML_CSS 2023. 3. 10. 더보기 ›› [HTML] HTML5 시멘틱 태그와 웹 표준을 지키는 이유 시멘틱 태그와 웹 표준을 지키는 이유에 대해서 알아보겠습니다. 1) 시멘틱 태그를 사용하는 이유 시멘틱 태그란, 해당 컨텐츠가 어떤 의미를 가지고 있는지를 명확하게 설명하는 태그입니다. 시멘틱 태그를 사용하면, 웹 페이지가 보다 의미론적으로 정확하게 작성되며 검색 엔진이나 스크린 리더 등에서 컨텐츠의 의미를 파악하는 데에도 도움을 줍니다. 시멘틱 태그의 사용은 웹 페이지의 가독성과 접근성을 향상시키며, 유지보수성과 검색 엔진 최적화에도 도움을 줍니다. 예를 들어, 다음과 같은 코드를 보겠습니다. 위 코드는 일반적인 div 태그를 사용하여 웹 페이지의 헤더를 만든 예시입니다. 그러나 이 코드는 시멘틱하지 않습니다. 즉, 이 코드만 보고는 이것이 웹 페이지의 헤더임을 알기 어렵습니다. 반면, 시멘틱 태그를 .. front/HTML_CSS 2023. 3. 8. 더보기 ›› [HTML] form 드랍다운 & input checkbox & radio 사용자에게 여러 정보를 미리 제공해주고 사용자가 그 중에서 선택하도록 할 수 있는 방법이 select 태그이다. Dropdown select태그는 option태그와 같이 쓰인다. 다음과 같이 select 태그 안에 option 태그를 넣어서 사용자가 선택할 데이터를 입력해주면 오른쪽 사진과 같이 드랍다운 형태로 데이터를 선택해서 제출할 수 있게된다. 여기서 form 데이터를 제출할 경우 select 태그의 name의 value값이 key값이 되고 option의 value값이 value값이된다. 서버에서는 보통 한글 데이터보다는 영어 데이터 처리가 많기 때문에 사용자가 선택할 때는 한글 데이터로 보여주고 form을 통해 서버로 데이터를 전송할 때는 영어 데이터를 보내줘야 하므로 option의 value값에.. front/HTML_CSS 2023. 2. 21. 더보기 ›› [CSS] SASS 기초 문법 정리 1. variable 변수를 사용하는 방법은 $변수명 : 저장할 내용; 다음과 같은 형식으로 사용할 수 있다. 다음과 같이 $title 변수에 blue 색상을 할당하고 body 태그 색상을 $title 변수로 지정하면 우측과 같이 body태그에 작성되어 있는 글의 색상이 변경되는걸 확인할 수 있다. 2. nesting scss 파일은 nesting 구조로 코드가 작성된다. ex) body태그 내부에 있는 .box 다음과 같이 nesting 구조는 css와는 다르게 body .box 로 가져오는게 아니라 중괄호 내부에 .box{} 형식으로 코드가 작성된다. 3. mixin 사용방법은 예제사진으로 확인 @mixin 사용하면 css를 확장해서 사용할 수 있다. (메서드형식?) @include 함수명(변수) 를.. front/HTML_CSS 2023. 2. 12. 더보기 ›› 반응형 이전 1 다음
