frontend4 [토이프로젝트] 쇼핑리스트: CSS 작성 [영수증 레이아웃 만들기] 이제 만들어진 html을 바탕으로 스타일링을 하려고 한다. 먼저 main클래스의 배경화면을 영수증처럼 해줘야하는데 어떻게 해야할지 고민이다. background-image를 쓸까? 아니면 대충 그렇게 보이는 것을 만들까? 라고 생각해서 mdn에서 background-image를 찾았는데 새로운걸 배웠다. Even if the images are opaque and the color won't be displayed in normal circumstances, web developers should always specify a background-color.If the images cannot be loaded—for instance, when the network is dow.. 2021. 12. 1. [토이프로젝트] 쇼핑리스트 사이트: 디자인 및 html 작성 강의를 듣고 있는 사이트에서 토이 프로젝트로 쇼핑리스트 사이트를 만드는 것이 나와서 직접 해보려고 한다. 일단 내가 대충 만든 레이아웃은 다음과 같다. 위의 디자인을 토대로 필요한 요소들을 html로 현재 만들고 있는 중이다. 아이콘들은 fontawesome을 이용했다. Shopping List Delete Checked name price name price name price Total: checked-price unchecked-price [Main Content] - 메인 요소들이 들어갈 div를 만들었다. DOM Tree에 많은 요소를 추가하는 꼴이 되지만 배경 이미지를 영수증으로 표현하기 위해서 그렇게 선택했다. [Add Items] - Input Box: 하나는 아이템 이름을 적기 위해, 다.. 2021. 12. 1. CSS 정리하기 정의 Cascading Style Sheet Cascading: 위에서 아래로 연속해서 떨어지는 느낌 세부적으로 정의된 것이 있다면 그것을 쓰고, 없다면 기본적인 것을 쓴다. Author Style: 개발자가 지정한 스타일 (최고 우선순위) User Style: 사용자의 취항에 맞게 정한 스타일 (중간 우선순위) Browser: 기본 스타일 (마지막 우선순위) -> Cascading important 키워드: cascading을 끊어냄 가능하면 쓰지 않는 것이 좋음 선택자 HTML의 어떤 태글르 고를지 정하는 것 * : 모든 태그 tag: 태그의 이름을 가진 것을 고름 #id: id를 고름 .class: class를 고름 [attribute]: 속성을 고름 /* 어떤 태그를 고를지 명시 */ select.. 2020. 9. 21. HTML 한 페이지에 정리하기 요즘 드림코딩의 엘리님이 하시는 프론트엔드 강의를 듣고 있다. 이제 막 강의 2개를 들어서 강의를 들으며 정리한 것들을 여기에 써놓으려고 한다. HTML (Hypertext Markup Language) 정의 웹을 이루는 가장 기본적인 building block css와 javascript는 웹을 더 풍부하게 만들어주는 부가적인 요소들 Markup Language 태그들을 이용해 어느정도 구조적으로 쓰는 것 구조 // 관습적으로 html임을 알림 // 이 안에 작성되는 것들이 유저에게 보여짐 Heading1 Heading2 Clickable Button w3c 웹의 표준화를 추진하는 곳 w3c에서 정한 표준화에 따라 각 브라우저가 html 태그를 해석함 브라우저는 어느 정도 스스로 에러를 회복해서 콘텐츠.. 2020. 9. 18. 이전 1 다음
