728x90

HR 3

3. CSS 예제

이번 포스팅에서는 지금까지 기재한 내용을 기반으로 예제를 만들어 보겠습니다. 예전 사이트에서 많이 써본 텝 모양 만드는것 그리고 화살표를 만들어서 활용하는 포스팅 그리고 현재로도 프로필사진을 둥글게 하는 여러 속성에 대한 것입니다. 마크업은 간단합니다 html 부분을 먼저 보면 텝모양 만들기 내용이 들어갑니다.내용이 들어갑니다.내용이 들어갑니다.내용이 들어갑니다. 내용이 들어갑니다.내용이 들어갑니다. 화살표 만들기 프로필 사진 이런식으로 간단한 마크업입니다. 전체 코드를 확인해서 어떤 CSS 속성이 들어갔는지 보겠습니다. 실습 hr { margin-top: 50px; margin-bottom: 20px; } #title { width: 200px; height: 40px; border-radius:30p..

Front-end/CSS 2018.08.13

5. 다음 UI 만들어보기

이번 포스팅에서는 CSS 를 제거한 오로지 HTML 만을 이용해서 다음 UI 를 만들어 보겠습니다. 우선 UI는 사용자 인터페이스를 말하는 겁니다 ! 먼저 예제 사진을 보여드리도록 하겠습니다. 이런식으로 UI를 만들게 되는데요 방법은 다양하며 아직 기재하지 않은 기술도 역시 포함이 되어있습니다. 이에대한 제가 기술한 코드는 다음 포스팅에서 업로드 해드리며 부가적으로 설명을 드리겠습니다.

Front-end/HTML 2018.07.23

2. 리스트 관련 요소들

이번 포스팅에서는 리스트에 관련하여 포스팅을 할 계획입니다. 리스트는 정말 중요한 개념인 것을 기억하면 됩니다. 그렇다면 어떤 것이 리스트이냐 ? 사진은 네이버의 실시간 급상승 검색어를 가져와 보았습니다. 이 실시간 급상승 하는 항목 또한 리스트로 볼 수 있고 이런 형식으로 나열된 항목 역시 리스트로 볼 수 있습니다. 코드를 확인해보면 이렇게 ul 이라 표기되어있는 항목이 바로 리스트중 하나인 순서가 없는 리스트라고 불립니다 ! 한번 예제 코드를 가지고 한번 볼까요 ? 리스트 요소들 ol : 순서가 있는 리스트 실시간 이슈 검색어 워마드 부산 싱크홀 성체 조원태 원동ic ul : 순서가 없는 리스트 자동차 뉴스 또 '물의 저주', 기록적 폭우 日 자동차 생산 차질 전기차 호황이라고? 배터리 업체가 이익을..

Front-end/HTML 2018.07.22
728x90
반응형