profile
유연한 개발자
post-thumbnail

부스트코스 배경화면과 배경색이 같이 나오도록 하기

위와 같은 프로모션 페이지를 마크업하는 과제였다. 요구사항으로는 해상도가 배경이미지의 크기를 넘어가는 경우에는 정해진 배경색으로 대체하는 것이었다.처음에는 배경 이미지의 크기에 맞춰서 div 태그의 width,height값을 명시했다. 그래서 그런가그랬더니 이미지들이

2021년 6월 17일
·
0개의 댓글

부스트코스 반응형 웹 tablet, mobile 강의 반추

앞서 pc버전에 이어 태블릿과 모바일 화면에 대응하는 반응형 웹 UI강의를 맞쳤고 배운 내용에 대해 반추하고자 정리함모바일 버전에서 메인 컨텐트 영역 float 해제 대신에 width: 100% 사용내가 마크업을 할때에는 float: left속성을 해제하고 displa

2021년 6월 13일
·
0개의 댓글
post-thumbnail

부스트 코스 반응형 웹 pc버전 정리

부스트코스해당 강의를 수강하면서 강의를 듣기전에 항상 내가 먼저 레이아웃을 일단 짜보는 편이다. 그 와중에 내가 모르는 부분을 정리하고자 한다.메인영역 속 리스트 요소들을 중앙정렬하기.위는 내가 짰을때 발생하는 문제점이다. 요소들이 중앙정렬이 되지 않는다. 여태껏 강의

2021년 6월 13일
·
0개의 댓글

ul li에 가로 스크롤 적용

부스트코스 반응형 과제를 작업하다가 리스트 태그의 속성들을 가로로 배치 한 후 부모요소를 넘어가는 자식 리스트 요소들에 대해서는 스크롤을 하는 기능을 구현한것을 정리하게 되었다.스크린의 뷰포트가 pc사이즈일때는 float:left 속성을 통해 가로로 정렬했고 이것을 태

2021년 6월 12일
·
0개의 댓글

부스트코스 폼 파일찾기 커스텀 정리

부스트코스폼 요소에서 input\[type='file']은 커스텀 미리정해진 레이아웃이 있어서 커스텀 하기가 힘들다고 한다. 그래서 input\[type='file']을 직접 커스텀하기보다 이 인풋요소를 opacity: 0;으로 스타일링하여 눈에 보이지 않게 하되 기능

2021년 6월 11일
·
0개의 댓글
post-thumbnail

부스트코스 폼 요소 체크박스 정리

부스트코스폼 요소 중 체크박스 커스텀에 대해 배운걸 정리했다.토글 형 체크박스CSS로 토글형 체크박스 스타일링이 가능하다. 이미지를 이용한 체크박스 커스텀이미지를 활용한 라디오 버튼 커스텀가상요소들을 이용해서 이미지를 추가하거나 임의의 도형을 만들어서 버튼 처럼 꾸민다

2021년 6월 10일
·
0개의 댓글

부스트코스 팝업 레이아웃 정리

부스트코스 팝업 레이아웃부스트코스에서 팝업 레이아웃을 공부 했는데, 자바스크립트 강의가 아니기 때문에 html,css를 이용해서 팝업 레이아웃을 짜는 방법만 배웠다. 부모 요소로부터 내부 요소의 위치를 top, left ,right 등의 기준으로 정하고 꼭 그 위치를

2021년 6월 9일
·
0개의 댓글
post-thumbnail

부스트코스 테이블 UI

부스트코스테이블 UI를 공부하다 내가 배운 부분을 정리해보려고 한다.대충 아래와 같은 달력 UI를 만드는 실습이다. 월요일의 코드는 강의를 다 듣고 , 강의에서 하는 대로 내가 고친 레이아웃이고, 목요일의 코드는 내가 임의대로 짜본 레이아웃이다.강의 레이아웃은 아래와

2021년 6월 8일
·
0개의 댓글
post-thumbnail

부스트코스 테이블 정리

위와 같은 아주 간단한 테이블 레이아웃을 짰고 내가 배워간 것을 정리해보려고 한다. table-layout: fixed는 성능상 중요하다.이유는 나도 잘 모르겠다. 강사가 그렇다니 그런가보다 하고 받아들이는데 추측컨데 브라우저 렌더링 과정에서 컨텐츠를 넣기 전에 tab

2021년 6월 8일
·
0개의 댓글
post-thumbnail

부스트코스 이미지 리스트 정리

부스트코스현재 수강하고 있는 부스트코스의 웹UI의 강의 중 이미지 리스트 활용 강의를 듣는데 강의는 총 2부분으로 구성되어있다.첫번째로 기본적인 이미지 리스트강의 두번째는 이 이미지 리스트에서 시각적 요소를 더 추가 한 강의가 있다. 두번째 강의에서 이미지 요소에 추가

2021년 6월 8일
·
0개의 댓글
post-thumbnail

img 태그는 가상요소 선택자를 쓸 수 없다. !

부스트코스 웹UI 활용편을 듣던 중 이미지 dimmed처리를 하는 수업인데 위와 같은 마크업을 했는데 문득 img태그는 inline-block이고 div.img_box는 block 속성인데 굳이 중복해서 블록 속성을 해야할까? 싶었다. 그래서 div.img_box를

2021년 6월 6일
·
0개의 댓글
post-thumbnail

유용한 HTML,CSS 컴포넌트

부스트코스부스트 코스를 들으며 이번 강의는 스스로 혼자 해봤다. 완전 정확하게는 아니더라도 요구사항을 분석하고 그걸 구현 할 고민을 하고 마크업을 했다. 밑에 서브 이미지리스트 부분은 1개만하고 나머지는 반복이어서 하다가 말았는데 하다가 애매하다 싶은 부분은 나중에 강

2021년 6월 6일
·
0개의 댓글
post-thumbnail

탭 메뉴

부스트 코스이런 탭 메뉴를 제작하는 수업이다. 레이아웃을 보면 두가지 부분으로 나눠져 있는데첫째는 탭을 이동하는 부분이고 둘째는 각 탭의 순위를 나타내는 리스트 부분이다. 이렇게 생각을 하고 첫번째 탭 이동 버튼 부분부터 레이아웃을 짯다.수업에서는 저 부분을 ul 태그

2021년 6월 5일
·
0개의 댓글
post-thumbnail

부스트코스 2단 메뉴 마크업 중 어려웠던 점

부스트코스위와 같이 2단 메뉴를 마크업 하던 중 어려웠던 점을 정리해봤다.어떻게 서브메뉴가 메인메뉴 하단에 자리잡게 하는가?위는 메인메뉴와 서브메뉴의 마크업인데, 메인 메뉴의 a태그 아래에 서브메뉴가 위치하기 된다. position:absolute가 어떻게 서브메뉴를

2021년 6월 5일
·
0개의 댓글
post-thumbnail

1단 메뉴

부스트코스의 웹UI과정 중 위와 같은 형태의 메뉴바를 만들어 보는 수업이다.요구사항은 아래와 같다.메뉴의 HTML마크업으 아래와 같다.이번 수업에서 특이한점은 간격이 일정한 메뉴를 만들기 위해 display: table 속성을 이용했다는 점이다. 예전에 깃허브 클론코딩

2021년 6월 4일
·
0개의 댓글
post-thumbnail

고정 레이아웃

부스트코스상단 고정 레이아웃html 마크업을 위와 같이 잡아준다. 특히 <section class="content> 부분은 container로 감싸주는것이 앞으로 패딩이나 마진을 활용하기에 편해서 위와 같이 마크업했다.header 부분은 상단 고정이므로 다음과

2021년 6월 3일
·
0개의 댓글
post-thumbnail

2단 레이아웃

부스트코스에서 레이아웃을 배우고 있다.2단 레이아웃의 요구사항은콘텐츠가 2개의 행을 갖는다.콘텐츠와 사이드 영역의 구분선을 갖는다.구분선은 헤더와 푸터가 맞닿는다.float을 이용한 2단 레이아웃마크업은 위와 같이 한 후 section,aside에 float:left속

2021년 6월 3일
·
0개의 댓글

IR 기법 텍스트 숨기기

img 태그에서 대체 텍스트를 주기 위한 방법으로 alt 속성을 이용하는데 대체 텍스트가 너무 길 경우에는 따로 텍스트 요소를 추가 한 후 스크린 리더가 읽을 수 있게는 해놓고 숨기게 하는 방법을IR(Image Replacement)기법이라고 한다.나쁜 방법처럼 요소를

2021년 6월 1일
·
0개의 댓글
post-thumbnail

colspan validator 에러

네이버 부스트코스 웹UI 과정 프로젝트 A-2의 테이블 레이아웃을 짜는데 colspan 때문에 많은 에러가 생겼다.이러한 테이블을 만드는데 첫 구분 ‘컬럼’의 하위 td 데이터를 보면 꼭 ‘미국남아’와 ‘사이즈’ 컬럼크기와 ‘small’ 컬럼의 하위 데이터를 비교했을때

2021년 4월 20일
·
0개의 댓글