만숭이의 블로그 :)

웹사이트의 구조 실습1 - django 홈페이지 대략적인 구성 구성요소 설명 실습1 - django 홈페이지 틀 잡기 *, *::before, *::after{ box-sizing: border-box; } /* HEADER */ .header{ background: yellow; } /* MAIN */ .main{ background: lime; } .hero-section{ background:aqua; } .main-content{ background:blue; float:left; width:70%; } .slide-content{ background:pink; float:right; width:30%; } /* CONTENT-INFO */ .content-info{ background:green..

실습1-class selector 여러가지 클래스를 한 번에 스타일링 할 수 있다. 중복사용 가능 태그선택자보다 클래스선택자를 선호한다. .selector{ background:yellow; width:150px; } .class-selector{ color:red; } 클래스 선택자 두번째 class-selector 태그 선택자 id 선택자 실습2 - id선택자 선택자 앞에 # 을 붙여서 사용한다. 클래스선택자처럼 중복해서 사용 불가능. 실습3 - 우선순위 (구체성 점수) id 선택자의 구체성 값 : 100점 Class 선택자 및 가상클래스의 구체성 값 : 10점 태그 선택자 및 가상요소 구체성 값 : 1점 위 점수표대로 css스타일링 구문이름마다 점수를 매기면, 점수순이 우선순위 순. 따로 사이트가 ..

** 인라인 요소 HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지 실습1 실습2 - box, 이미지float Django 팀 사랑한만큼 비겁해요 그대는 만날 수도 없단 걸 알면서도 나를 걱정하네요 마음을 달래도 갈려진 자석같이 그대를 찾아요 The web framework for perfectionists with deadlines. 이미지 인라인설정하지 않고 이미지 float 오른쪽 처리 해주었을때 .container{ background-color :#0c4b33; color:#fff; } img{ float:right; } p{ di..

실습1 - 폰트사이즈, 폰트변경, 폰트굵음처리 URL dispatcher 내일 10시에 꼭꼭 일어나자~~ 알바 바이오 리듬 맞춰야함 시재점검(봉투) 금고 돈 점검 하이패스, 냉장기기, 담배점검 유통기한 점검 금고 돈, 근무일지 작성 p{ font-size:30px; font-family:serif; font-weight:bold; } 실습2 - 폰트 스타일링 한 줄로 작성 가능 (단, 글꼴은 맨 끝으로 가야함) p{ font:normal 500 1.5rem Arial, Georgia, Times, "Times New Roman", serif; } 실습3 - 글자 정렬 text-align 실습4 - 줄간격 lign-height 실습5 - 글자색 작을수록 검은색, 클수록 흰색 p{ /* #ffffff흰색 #..

- span 태그는 스타일링 목적으로 사용됨 - class 나 id같은 어트리뷰트로 css에서 스타일링 가능 - span과 div는 비슷하지만 제일 큰 차이는, div는 블록단위이고 span은 인라인단위이다 - span은 인라인 요소이기에 줄바꿈이 일어나지 않는다 실습1 - span, class기능 인라인요소 스팬 인라인 요소 div태그 내 span태그 is p1 unchangeable?? is d2 unchangeable?? is s3 unchangeable?? .b3{ color : yellow; background:green; } .classpan{ color:blue; } .p1{ background: red; } .d2{ background: orange; border: 2px ..

실습1 - 카테고리, 리스트 Heading level1 Heading level2 텍스트를 단락으로 정의할 때 사용된다. 굵게 굵게 태그 내에서도 굵게 굵게!! 일 이 삼 사 11 22 33 실습2 - 정의와 설명 HTML 웹페이지에서 콘텐츠의 구조를 표현하기 위해 고안된 포맷 CSS 웹페이지의 스타일링과 디자인을 위한 스타일시트 css css css 실습3 - 하이퍼링크, 코드태그 naver로 이동 ~천숭2의 티스토리 블로그~ 코드태그. 서버가 수행해야 할 동작을 의미합니다. GET, POST, DELETE등이 있다. * 단축키 * li * n : n개 만큼 리스트 생성 ctrl + / : 주석

https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 컴퓨터 언어를 설치하지 않고 브라우저에서 실습이 가능함. 다른 사람들이 만든 것들을 보고 참고할 수 있음. https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information about Open Web technologies in..

그림 so cute = 콘텐츠의 구조를 태그로 -> 웹 브라우저가 이 태그들을 그래픽으로 보여줌 - 프로그래밍 언어 X - 웹페이지의 콘텐츠 구조 - 태그로 구성됨 - 시각적으로 꾸며주는 역할 - 웹 페이지를 동적으로 만들어 줌 - 상호작용이 있으면 서버와의 통신가능 - 상호장욕이 없으면 로그인 시 에러 처리를 무조건 서버에서 처리