웹 개발

교안파일 *샘플 싸이트 https://parkinwook.github.io/TEST3.github.io/ html 코드 상세내용 [게릴라특가] 30일체험가능! 벨라페이스 3컬러 LED마스크 눈마사지 겸용/4단계 시간조절/피부홈케어 +사은품까지! 135,000원 무료배송 상품별배송 ㅣ 택배배송 ㅣ당일출고, 12시 이전 결제 건까지 해당 (주말, 공휴일 제외) 총상품금액 0원 장바구니 구매하기 등록하기 *css코드 * {padding: 0; margin: 0; line-height: none;} img {max-width: 100%; height: auto;} .btn {border-radius: 0;} .form-control {border-radius: 0;} .detail {min-height: 370..

빨간 체크 부분을 주의해서 봐보자. 선택자 지정시 li.m0 이렇게 붙여서도 사용 가능. li.m0-> li 이면서 m0 클래스를 갖고 있는 것을 의미. #반응형 디자인 *미디어 쿼리 사이즈에 따라서 바뀔 디자인을 2개이상 만들어 놓음. -html 코드 반응형디자인 media 박스 박스 박스 박스 박스 박스 *부트스트랩 (프론트엔드 프레임워크) 설명: 부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크이다. 하나의 코드로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하게 만들 수 있으며, 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다 -by. 위키백과- -무료 html 템플릿 참조 사이트 https://startbootstrap.c..

금일 디자인 실습한 내용들은 모두 JadeStone 깃 허브 CSS 레파지토리에 올려져있음. https://github.com/BigJadeStone/CSS.git *똑같은 글자 찾기창 키는 단축키 : ctrl + f *특이했던 속성들 opacity: 0; /* 투명도 0 */ transition: opacity 0.25s ease-in-out; -opacity : 투명도를 주는 속성. -transition : 애니메이션 효과를 주는 속성. -> https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1 참고 - background-color: rgb(0,0,0,0.7); 위에 속성이 원래 rgba라고 하셨음. rgba 속성 : 투명도를 준..

*디자인 시작할 떄 이렇게 해주고 시작하는게 좋음. *{padding:0; margin:0; list-style: none;} 패딩 과 마진 없애주고 리스트에 점 없애주기. 그래야 모양이 내가 생각하는데로 나올것임. #박스 레이아웃 position ★★★★★ *absolute 랑 fixed만 알면 됨. * html은 3d로 이루어져 있음. z축 방향으로 움직인다고 생각하면됨. position:absolute;를 주고 position:relative 를 아무데도 주지 않으면 body 기준으로 올라온다. 부모에 relative 줌. 포지션 포지션 포지션 결과 또 다른 예 - 코드 박스1 박스1 박스1 박스1 포지션 결과 *fixed 창에 포지션 지정해준 부분을 고정해줌. 코드 sticky는 특정높이 전까지는..

-항상 기준은 윤곽이라고 하는 border가 기준. -border (윤곽선) 안쪽으로 들어오는 여백을 패딩이라고 함. / 패딩: 개발자도구에서 초록색으로 표시 -margin은 border 기준으로 바깥 여백을 말함. / 마진: 개발자 도구에서 주황색으로 표시 -실제 박스의 너비와 높이 (크기) = 컨텐츠 크기 + 패딩 + 윤곽 위에서 가로의 길이는 300(width)+1(윤곽선 왼쪽)+1(윤곽선 오른쪽) = 302px; 박스의가로: width + padding + border = 322px; # *패딩 -패딩은 패딩안에 컨텐츠를 안쪽으로 밀어넣을 때 사용. 박스의가로: width + padding + border = 322px; *마진 -마진은 상자와 상자의 거리를 벌릴 때 사용 마진: #margin을 ..

교안파일 CSS 기초 -나랑 가까울 수록 가장 먼저 적용됨. -외부 스타일 시트가 가장 많이 사용됨. 외부 스타일 시트는 index01.css 이렇게 css확장자 파일을 만들고 index01.css p{color:red;} 이렇게 속성과 값을 설정해줌. 그리고 아래처럼 외부스타일시트 외부스타일시트 외부스타일시트 % - 부모 태그에 대한 나의비율 em - 부모영역에 지정된 크기에 대한 나의 배수단위 // ex) 0.5em , 1em, 2em px - 그냥 고정값을 갖는 나의 크기 , 가장 많이 사용됨. vh - 보여지는 화면크기에 대한 비율 이렇게 4개만 알면됨. #선택자는 정말 중요 - * : 폰트같은거 설정할 때 사용 - 위에 #header는 header태그를 말하는것이 아니라 id 속성이 header..