초보 개발자의 일기

문제 input 태그에 type='radio'를 사용하면 체크박스가 나오면 선택을 할 수 있다. 이 체크박스를 제거하고 버튼을 사용할 때와 비슷하게 radio를 구현하고자 하였다. CSS 스타일링은 emotion을 사용하여 스타일하였다. 예제 코드 남자 여자 css export const Label2 = styled.label` display: flex; align-items: center; justify-content: center; color: #969696; background-color: #ffffff; position: relative; box-sizing: border-box; box-shadow: 0 4px 4px 0 #00000040; border: 1px solid #969696; bor..

SCSS 사용하기 gulpfile.babel.js안에 있는 이 코드는 const routes = { css: { watch: "src/scss/*", src: "src/scss/styles.scss", dest: "dest/css", }, }; 특정 파일을 보고 있는데 그 파일은 styles.scss이다 styles.scss이 파일이 하는 모든 행동을 다 지켜보고 있다. styles.scss에서 일어나는 모든 일은 CSS로 compile 된다. 이렇게 styles.scss 파일을 수정하면 자동으로 style.css도 바뀐다. variables 가장 중요한 color나 가장 중요한 styles을 저장하고 싶을 때 사용 _(밑줄)이 있는 파일은 CSS로 변하지 않았으면 하는 것이다.( CSS로 컴파일되기를 ..

div.container> div.item.item${$}*10 다음 tab키를 누르면 간단하게 작성 div태그의 클래스는 container 컨테이너 안에 또다른 div item 만들고 클래스는 item으로 뒤에$를 쓰면 자동지정{$}*10 10번 반복 -float 이미지와 텍스트를 어떻게 둘것인지를 정의하기 위해 존재한다. float: left 이미지가 왼쪽으로 가고 텍스트가 이미지를 감싸면서 출력 -flex box flex box는 container와 item으로 구분되어 사용이 된다. container를 꾸밀 수 있는 것은 display, flex-dircetion, justify-content 등등이 있고 item은 flex-grow, flex-shrink, aligin-self 등 있다. fle..

div는 기본적으로 block 레벨이고, span 기본적으로 inline 레벨이다 HTML 1 2 3 CSS div,span{ width: 80px; height: 80px; margin: 20px; } div{ background:red; display:inline-block; } span{ background:blue; display:block; } 결괏값 inline은 내용이 있어야 표출이 된다 물건 자체의 크기로만 된다. content의 크기에 맞춰서 변경이 된다. 쉽게 말해서 물건 그 자체 내용이 없는데 나오게 하기 위해서는 inline-block으로 쓰면 된다. 상자로 변환되어 content 크기와 상관없이 우리가 정한 height width로 나온다. 쉽게 말해서 한 줄로 정렬이 되어 나오는..

body안에 있는 모든 div들은 body의 속성을 상속받아 같이 적용을 받는다 div는 div의 속성을 사용하고 div의 자식은 부모인 div의 속성을 물려받는다. 상속을 이용하면 코드 중복성 줄여주고 생산성 높이고 유지보수 편하고 재활용할 수 있다. -셀렉터 조합 상속 구조 관계에서 원하는 요소를 선택하기 위해 실렉터를 결합하는 것 1. 후손 선택자 Selector A Selector B A 요소 아래에 있는 모든 B의 요소가 해당 2. 자식 선택자 Selector A + Selector B A의 직접적인 자식인 B만 선택된다. 3. 인접 형제 선택자 Selector A + Selector B A와 가장 인접한 형제 요소 B만 적용 4. 일반 형제 선택자 Selector A ~ Selecotr B A..

contents box : 값이 들어가는 텍스트, 이미지의 실제 영역 padding box : 콘텐츠 박스 테두리와 콘텐츠 사이의 공간 border box : 박스를 둘러싼 테두리 영역 margin box : 박스의 외부 영역으로 바로 앞 박스와의 여백 전체 박스의 크기: content box+ border + margin + padding을 더해야 전체 박스의 크기이다. border 설정하는 법 border-width : 테두리 두께 속성 네 영역 개별 적용 가능, 상하, 좌우 묶어서 적용 가능 border-color : 테두리 색상 속성 border-radius : 테두리 모서리를 둥글게 만들기 위한 속성 ex) div { border-width: 10px 8px 6px 4px //top, right..

절대 단위 : cm , mm , in , px(픽셀), pt(포인트), pc 화면 크기나 해상도에 따라 엄청 크거나 굉장히 작게 보일수 있다. 상대 단위: 부모 요소를 기준으로 상대적으로 크기를 정한다. 반응형 웹 같은 곳에서 많은화면크게에 대응할수 있는 웹페이지 레이아웃 구현 가능 % , em, rem을 많이 사용 em: 기준이 부모( 부모의 기본 크기가 1em이 된다.) rem: 최상위 root를 기준으로 함( 루트요소(html)의 비례)

셀렉터: 스타일이 적용되는 대상 ex) 태그, 아이디, 클래스 기본 셀렉터 1. 태그 셀렉터 태그 이름으로 선택한다. p { text-align: center; color: red; } h1,h2,h3,h4 { color: blue; } 태그에 있는 특정 속성에만 지정해서 스타일을 줄 수도 있다. input[type=text] { background-color: blue; color: white; } 문서 내 모든 태그에 적용이 된다는 문제가 있다. ex) 한 h1에 대해서만 스타일을 주고 싶은데 문서에 있는 모든 h1에 스타일이 다 들어가 버린다. 2. id 셀렉터 id는 페이지 내의 유일한 값이다. -> 하나의 고유한 요소를 선택할 때 사용한다! #id_name { color: blue; } --- ..