하얀성의 개발 메타인지

css reset 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 @charset "UTF-8"; /* 기본 스타일 */ body { font-family: '나눔고딕', NanumGothic, Dotum, '돋움', sans-serif; font-size: 14px; line-height: 16px; } body, ul, ol, li, div, a { margin:0; padding:0; } ul, ol { list-style:none; // list 앞에 표시x } a..

상단 고정하기 container(.wrap, height: 100%, 현재 content만 감싸는 중. header는 x)가 footer가 화면에서 안보일 만큼 높이를 차지하고 있었는데, margin -100px;을 통해서 container가 화살표 만큼 올라가서 footer가 보이게됨 그래서서 content의 높이가 100px 작아짐 아래에 보시다시피 300px의 content가 margin-top -100px 되기 전까지는 잘리지 않고 300px 그대로 유지중인 걸 확인가능. margin-top -100px 하니깐 content가 잘려서 작아진 200px의 높이가 된것을 확인할 수 있다. container의 하부내용인 content를 화면안으로 100px, header 아래에서 나오기 위한 100px..

1단 레이아웃 제작 스타일 정보 컨텐츠 최대 가로 길이: 1200 사이트 최소 가로 길이: 800 컨텐츠 가운데 정렬 주요 태그 및 속성 HTML div header section footer CSS max-width min-width margin max-length 최대 늘어나는 길이 min-length 최소 줄어드는 길이 감싸는 부모요소 wrap에 최소 길이 min-length를 사용했다면 자식요소에서는 적어줄 필요가 없다. 아래처럼 wrap으로 감싸주게 된다. 태그는 block 요소임. 태그나 header, section footer div 등은 block 요소이니 가운데 정렬은 margin: 0 auto;를 이 header content footer header content footer 다단 레..

css reset 크로스 브라우징: 어떤 웹 브라우저를 써도 화면이 똑같이 나오고, 입력과 사용에 문제가 생기지 않도록 하는 것. CSS 리셋: 모든 브라우저에서 똑같은 화면을 볼 수 있도록 기본값을 초기화하는 것, 정해진 형식이나 코드는 없음. inline 요소의 여백 없애기 1. display로 block 요소로 변경 2. vertical align: top; 으로 변경 요소 숨김 처리(너무 설명이 긴 이미지, 내용이 너무 긴 경우 사용) ㅡ> 따로 숨김처리 해놓고, 글자 인식은 되는 화면을 만들어 주는 것. 권장 사용방법 relative로 clip_wrap 영역 지정한뒤, 그 안에서 absolute가 놀게 함. absoulte는 top, left 등 자리 값을 지정해 주지 않으면, 그냥 그 자리에 ..

쉰 날을 제외하면 총5일 걸려서 제작함. 솔직히 많이 배웠음. html, css 별거 없다고 javascript 할 때, 생각했는데.. 이걸 안해서 기본조차 안되어 있었던 것이었음. 클론코딩 안하고 직접 만들어낸 첫 결과물!!!!!!!

하이퍼링크 밑줄 없애기 a 태그의 text-decoration 속성을 none값을 적용하면 됩니다. a { text-decoration: none; } 웹툰 작품은 쿠키를 사용하여 대여/구매 하실 수 있습니다. ㅇㅇ ㅇㅇ 위와 같은 점 list를 블릿 리스트(Bulleted list)라 함. 보충: 1.article 쓸 때, header도 소용없고, 오로지 h1~h6 중에서 하나 무조건 써야 오류안생김. 2. 하이퍼링크 지워줄 때는 a 태그에 text-decoration: none; 적용해줘야됨.

form 요소는 만드는데 어려운 부분은 없었으나 기존에 해오던 html 코드가 내가 감당불가할 정도로 쌓여서 관리가 힘들었다. 그리고, live server 가 안되서 그 버그 수정하느라 애 좀 먹었다. 정답은 잘게 쪼개서 내가 조립한뒤에, 유효성 통과하고 나서, 결과를 최종본에 합치는 방식을 새롭게 채택하기로 했다. select 박스 직업선택 학생 회사원 기타 아래와 같이 회사원이 선택된채로 출력됩니다. radio 박스. (꼭 label로 안북어 줘도 된다.) ction='a.jsp'> 성별 여성 남성 좋아하는 과일 사과 바나나 오렌지 아래처럼 name 속성을 동일하게 주면, 10대 20대 30대 아래처럼 단 하나만 다중택일 된다. input에서 나오는 for=""은 id를 사용해줄 때만 써줘야함. c..

은 안에 넣는다. border-collapse 속성 border-collapse 속성값을 collapse로 설정하면 해당 테이블의 테두리는 한 줄로 표현된다. 이 속성을 명시하지 않으면 해당 테이블은 기본 설정으로 테이블 요소별 테두리를 모두 표현하게 된다. ♣ 두 줄 표 말고, 한줄표 만들때 사용 CSS table, th, td { border: 2px solid orange; } table { border-collapse: collapse; } + border-collapse - collapse : border를 한 줄로 합칩니다. - separate : border를 분리한채로 유지합니다. tr {border-bottom: 2px solid black} 으로 해도 선이 나타나지 않는다. 그렇다고 t..

타입은 보통 screen print all 이 쓰이지만 대부분 screen만 자주 사용됨. 속성에는 width, orientation 두가지 속성. width는 넓이, orientation은 화면이 가로로 되있는지 세로로 되어 있는지 구분 짓는 속성. *S : 여백 [ a ] : a가 나올 수도 있고 나오지 않을 수도 있습니다. a | b : a 또는 b 둘 중에 하나를 선택합니다. "|"는 파이프 라인 기호로 키보드의 역슬래시(\) 키를 Shift 키를 누른 채로 누르면 나옵니다. a? : a가 0번 나오거나 1번만 나올 수 있음 a* : a가 0번 나오거나 그 이상 계속 나올 수 있음 media_type : all, screen, print 등 명세에 정의된 미디어 타입 media_feature : ..

https://nonipc.com/entry/%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8semantic-tag-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95 시맨틱 태그(semantic tag) 사용 방법 1. 시맨틱 코드 참고할 글 : 2021.04.09 - [코딩/HTML] - 시맨틱 태그(semantic tag) 꼭 써야 할까? 시맨틱(semantic) 태그란 그 이름 자체만으로 브라우저나 길 잃은 사람들, 지구 상의 원주민, 개발자, 수정자 nonipc.com 가운데 정렬 인라인 요소 : text-align: center / 블럭 요소 : margin: 0 auto float를 쓸 때는 부모요소로 감싸줘야함. 그냥 header 안에 di..