ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 100920 #003
      HTML 2020. 9. 10. 12:29

      0809 복습

       

      0909 복습

      web program - 환경설정 - web content 가 가능하도록 프로젝트

          eclipse - dynamic web project 

      • Context root  - 기본 프로젝트이름 - 변경 -url 적용
      • WebContent 폴더 - 웹서비스 front 에 나오는 파일이 이곳에 - html, jsp
      • java resource - src - .java → bulid classes - DB interface제공
      • - charset / encoding ⇒ utf-8   = UTF-8

       

      semantic tag - body 안에 구조화된 틀을 만드는 태그

      <header>

      <nav>

      <section> <article> </section>

      <footer>

       

      css

      inline

      embeded

      link 

       

      selector

       

      head tag

      meta웹 페이지 정보 전달

      title제목

      script스크립트

      link

      style

      base

       

      phg svg jpg 비교

       

      jpg

       

       

       

      tag 별 속성

      quiz / exercise / certification

       

      form tag

      <form action="연결될 url" method="get/post..." >

       

       get은 url에 표시된다.

       

       

      post는 보안상 보여지면 안되는 데이터 전송 시 이용된다.

      길이가 긴 데이터 전송 시에도 사용

       

      주소창에 ? 이후는 form태그를 통해 전달받은 데이터 & 또 다른 전달받은 데이터 ,,,,

       

      속성 선택자

       

      E[attr]

      E[attr="val"]

      E[attr~="val"]

      E[attr^="val"]

      E[attr$="val"]

      E[attr*="val"]

      E[attr|="val"]

       

      가상 선택자 (pseudo selector)

       

      가상 클래스 선택자

      E:link

      E:visited

      E:active

      E:hover

      E:focus

       

      :link, :visited 선택자는 <a> 태그 요소와 관련이 있다. 사용자가 링크를 방문한 적이 있는 지 없는 지 판단

       

      가상 요소 선택자

      E:root

      E:nth-child(n)

      E:nth-last-child(n)

      E:nth-of-type(n)

      E:first-child

      E:last-child

      E:first-of-type

      E:last-of-type

      E:only-child

      E:only-of-type

      E:empty

       

      부정 선택자

      E:not(S)

       

      nth 연습

       

      ol li:nth-child(4n+2) {color:orange}

      ol li:nth-last-child(4n) {color:yellow}

      ol li:first-of-type {color:green}

      ol li:empty {background:blue}

      p:not(.class1) {color: red}

       

       

      p.66까지 실습

       

       

      레이아웃

        

      margin 은 width에 포함되지 않는다.

       

      float

       - 박스의 배치 방향 지정 

      : 약간 워드에서 글과 어울림?같은 느낌인 거 같아

       

       

      clear

      : float에 대한 적용 해제

       

      overflow

      :when? 콘텐츠가 요소의 박스에 넘칠 때 표현 방법 지정

       

      text-overflow

      ellipsis : 텍스트가 잘렸다는 것을 표현하기 위해 말줄임표(...)를 표시

       

      display

      요소를 표시하는 방법을 지정 (블록 모델 변경)

       

      visibility

      요소를 보여주거나 숨기도록 하는 속석

      visiblie

      hidden

      collapse : hidden과 유사하며 테이블의 내부 객체에 적용

       

      hidden과 collapse의 차이는 '공간'이다.

      hidden은 공간은 유지한 채, 사라지지만

      collapse는 공간 자체가 사라진다.

       

       

       

      box model

      예시 만들어서 해보자

       

      CSS 기본이 되는 디잔

      inline, inline-block, block, table, absolute, float가 존재

       

       

      inline box

      : 부모 요소의 너비를 초과하면 자동 줄바꿈

       

       

      inline-block

       

       

      block box

      부모 요소보다 초과하게 되어도 밖으로 넘쳐서 표시

       

      table

       

       

      absolute

       

      float

       

       

       

      테두리

      순서: border-width, border-style, border-color  순으로 작성

       

      border 종류

      solid, dashed, dotted, double, grove, ridge, inset, outset, hidden

       

      border-radius: 2em 3em 4em 5em > 모서리 굴곡

       

       

      CSS3에 추가된 속성 (브라우저마다 가능 여부가 다르다.)

      vender-prefix

      -webkit-border-radius (사파리, 크롬)

      -ms-border-radius (인터넷 익스플로러)

       

      <CSS>

      
@charset "UTF-8";
html, body, h1, h2, h3, h4, h5, h6, section, header, aside, footer, nav, article, figure,
fieldset, p, ul, ol, li, dl, dt, dd, form { margin: 0;padding: 0;
}
body {
	font: .8em Arial, sans-serif;
	 }
html { 
	background: #ddd
	 }
	 
.mission_a {
	text-decoration: none;
}

/* .mission_a a:hover::before{
	
	content: 'HTML CSS: before';
	font: .9em Helvetica sans-serif;
	color: lightblue;
	
}
 */
.mission_a h1 a:hover::after{
	
	content: 'HTML CSS: after';
	font: .7em Helvetica sans-serif;
	color: lightblue;
	position:absolute;
	display:block;
	margin-left:120px;
	top:0;
	padding:10px;
	background:pink;
	border: 2px solid red;
	
}

       

      <HTML>

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css test.</title>
	<link href="mystyle.css" rel="stylesheet" type="text/css">
	
<style>
	

</style>
</head>
<body>
	
	<div class="mission_a">
	<h1><a href="#">웹표준 2.0</a>테스트</h1>
	</div>

</body>
</html>

      위의 파일들을 실행하면, 다음과 같은 화면이 출력된다.

       

      hover::before
      hover::after

       

       

      <CSS>

      .mission_b {
	position: relative;
	top: 10px; left: 10px;
	border: 1px solid #ccc;
	width: 70px; height: 70px;
	
}

.mission_b img{
	opacity : .3;
	-webkit-transition: opacity .3s ease-out;
	-moz-transition: opacity .3s ease-out; 
	-ms-transition: opacity .3s ease-out; 
	-o-transition: opacity .3s ease-out;
	transition: opacity .3s ease-out;

}

.mission_b img:hover{
	
	opacity: .9
}

      <HTML>

      	<div class="mission_b">
	<img src="./images/stuoy_white.jpg"/>
	</div>

      hover before
      hover -ing

       

      .3s ease-out 은 투명도(opacity)가 0.3에서 0.9로 급변할 때에 이를 부드렵게 변화시키기 위한 명령어,

      이는 브라우저마다 명령어가 달라서, 여러 브라우저를 통해 접근할 때 무결성을 유지하기 위해 모두 써놓는 것이 좋은 것 같다.

       

      \ 시험 '화면 설계'

      이런 화면을 html로 만들어봐라

       

      fieldset >

       

      1. 화면 전체 구현

      회원 가입 화면

       

      'HTML' 카테고리의 다른 글

      170920 #009  (0) 2020.09.17
      160920 #008 예제 풀이  (2) 2020.09.16
      150920 #007 화면구현 from the top  (0) 2020.09.15
      090920 #002 CSS / Selector  (2) 2020.09.09
      080920 #000 Mac, Eclipse, Tomcat  (0) 2020.09.08

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바