Programmers

1) opacity 요소의 투명도를 지정 속성 값 값 의미 기본값 숫자 0부터 1사이의 소수점 숫자 1 사용법 border: 투명도(0~1소수점); .half { opacity: 0.5;/* 50% 투명도, 반투명 */ } .transparent { opacity: 0;/* 0% 투명도, 투명 */ } .box { opacity: .75;/* 75% 투명도, 반투명 */ } ※ .75 = 0.75 코드 opacity: 1; html 123 css .parent { width: 300px; height: 250px; background: blue; overflow: auto; } .parent .child { width: 150px; height: 100px; background: tomato; displ..

1) overflow 요소의 크기 이상으로 내용(자식요소)이 넘쳤을 때, 내용의 보여짐을 제어 속성 값 값 의미 기본값 visible 넘친 부분을 자르지 않고 그대로 보여줌 visible hidden 넘친 부분을 잘라내고, 보이지 않도록 함 scroll 넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함 auto 넘친 부분이 있는 경우만 잘라내고, 스크롤바를 이용하여 볼수 있도록 함 ※ scroll: 강제 ※ auto: 자동 사용법) overflow: visible; html 1 2 3 .parent { width: 300px; height: 250px; border: 4px solid; overflow: visible; } .parent .child { width: 100px; height: ..

1) display 요소의 박스 타입(유형)을 설정 속성 값 값 의미 기본값 block 블록 요소( 등) inline 인라인 요소( 등) inline-block 인라인-블록 요소( 등) 기타 table, table-cell, flex 등 none 요소의 박스 타입이 없음(요소가 사라짐) ※ block: 가로, 세로, 패딩, 마진 사용 가능 ※ inline: 가로, 세로, 패딩, 마진 사용 불가능, 우측으로 쌓임, 텍스트를 다루는데 특화 ※ inline-block: inline의 특성을 가지지만 가로, 세로, 패딩, 마진의 위아래를 사용 가능 display: none; 화면에서 사라짐 사용법 ※ span태그는 inline요소이기 때문에 width, height값이 안 먹혀서 아무것도 출력이 되지 않는다. ..

1) box-sizing 요소의 크기 계산 기준을 지정 속성 값 값 의미 기본값 content-box 너비(width, height)만으로 요소의 크기를 계산 content-box border-box 너비(width, height)에 안쪽 여백(padding)과 테두리 선(border)를 포함하여 요소의 크기를 계산 사용법 html css .box { width: 200px; height: 200px; background: orange; padding: 40px; border: 10px solid red; } ※ 개발자도구를 통해 영역을 확인해보면 200x200인 default(content-box)를 고정하고 padding을 더하기 때문에 당연히 크기가 커진다. border-box속성을 추가하면 외부 ..

1) border 요소의 '테두리 선'을 지정 속성 값 값 의미 기본값 border-width 선의 두께(너비) medium border-style 선의 종류 none border-color 선의 색상 black 사용법 border: 두께 종류 색상; .box { border: 1px solid red; } 2) border-width 선의 두께(너비)를 지정 속성 값 값 의미 기본값 medium 중간 두께 medium thin 얇은 두께 thick 두꺼운 두께 단위 px, em, cm 등 단위로 지정 ※ 단위로 지정하는 것을 추천 사용법 border-width: 위 우 아래 좌; border-width: 위 [좌,우] 아래; border-width: [위, 아래] [좌, 우]; border-width:..

paddding 요소의 '내부(안) 여백'을 지정 ※ 크기 증가 추가된 padding 값만큼요소의 크기가 커지는 현상 예제) ▷ box-sizing: border-box; 여백이 안쪽으로 나타내게 하는 방법!

취업 후 벌써 2번째 월급이 들어왔다. 물론 신입이라 급여는 적다. 신입이 아니면 높다는 말은 아니다. 정확하게는 아니지만 200이라고 하면 될 것같다. 가장 먼저 들어와서 한 일은 웹 프론트앤드와 백앤드를 맛보았다. 왜 맛보았다고 말하냐면 가지고 있는 프레임워크를 사용해서 코드를 많이 바꾸지 않고, 가져다 복사해서 페이지를 만들었기 때문이다. 아마 처음부터 하나하나 신입이 개발하는 일은 크게 없을 듯하다. 하지만 아무것도 모르는 입장이라 처음 코드를 복사해서 가지고왔지만 안되는 것들이 투성이다. 그리고 프론트는 이렇게 저렇게 모양은 대충 만들었다. ( 후에 대충만들었기때문에 큰 큰 빅 이슈가 발생했다..... 아직 해결중) 분명 웹은 쉽다고 들었는데 어렵다. 프론트에서 데이터를 백엔드에서 받아오고 보내..

https://pandarank.net/ 판다랭크 셀러들의 인공지능 도우미 pandarank.net 아무튼 논지를 이사이트는 아주 직관적이기 떄문에 한번만 사용해보면 친숙해 질것이고 온라인 쇼핑몰 창업 또는 시작할때 큰 도움이 될 것이라 생각된다. 개발자 입장: 정말 잘 만든 웹이다. 갑자기 든 생각이지만 퍼블리싱도 아주 잘되있다. 차트나 이런걸 봤을때도 웹에 참고하면 좋을 듯하다.