Front/HTTP, CSS, JavaScript

한시간 만에 끝나는 HTML , CSS

오동순이 2023. 11. 16. 18:36

 

HTML , CSS

 

HTML

// index.html
// style.css <- 클래스로 사용한다

<html>

<head>

	<title> 타이틀 </title>
    
    // 클래스로 만들어서 사용하면 전역으로 되어 편하다.
    // 단 진짜로 사용할때는 css파일(=클래스처럼) 만들어서 사용한다.
    <style>
    .color-primary {
    	color: red;
    }
    .font-50 {
    	font-size: 50px;
    }
    </style>
    
</head>

// html Attribute > style , width
<body>

	<h1> 큰문자 </h1>

	<p style="color:red;"> 글자색 문자 </p>
    <p style="font-size:30px;"> 글자크기 문자 </p>

	<img width="400px" 
    src = "data:image/png;base64,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">

	<p class"color-primary" style="font-size:50px;"> 해드에 있는 .color-primary 가 적용됨 </p>
    <p class"color-primary font-50"> 해드에 있는 .color-primary와 .font-50이 적용됨 </p>

</body>


</html>

 

 

이벤트 button -> onclick 이벤트를 추가해봄.

// 이벤트

<html>

<head>

	<title> 타이틀 </title>
    
    // 클래스로 만들어서 사용하면 전역으로 되어 편하다.
    // 단 진짜로 사용할때는 css파일(=클래스처럼) 만들어서 사용한다.
    <style>
    .color-primary {
    	color: red;
    }
    .font-50 {
    	font-size: 50px;
    }
    .select-style1 {
		height: 40px;
        font-size:20px;
        color:blue;
    }
    
    // 경로를 맞추면 한번에 적용됨.
    .tb>thead>td {
    	border:1px solid#000;
    }
    </style>
    
</head>

// html Attribute > style , width
<body>

	<h1> 큰문자 </h1>

	<p style="color:red;"> 글자색 문자 </p>
    <p style="font-size:30px;"> 글자크기 문자 </p>
	
    // 이벤트 버튼은 onclick 클릭 하는 이벤트 
    <button type="button" onclick="javascript:alert('click button!!');">Click</button>
    
    // 텍스트 상자 - input은 끝태그가 없음
    <input type="text" />
    <input type="number" />
    
    // 옵션 상자 1
    <select style="height:40px;font-size:20px;color:blue;">
    	<option>seoul</option>
        <option>jeju</option>
    </select>
    
    // 옵션 상자2 - 스타일 클래스 
    <select class="select-style1">
    	<option>seoul</option>
        <option>jeju</option>
    </select>
    
    // 테이블(그리드) - 기본은 표 형식이 아님
    <table>
    	<thead> // 표의 제목부분
        	<tr> // 행
            	<td>이름</td> // 셀
                <td>지역</td>
                <td>전화번호</td>
            </tr>
        </thead>
        
        <tbody> // 표의 내용부분
            <tr> // 행
            	<td>홍길동</td> // 셀
                <td>서울</td>
                <td>010-1111-2222</td>
            </tr>
        </tbody>
    </table>
    
        // 테이블(그리드) - 표형식으로
    <table  class="tb">
    	<thead> // 표의 제목부분
        	<tr> // 행
            	<td >이름</td> // 셀
                <td >지역</td>
                <td >전화번호</td>
            </tr>
        </thead>
        
        <tbody> // 표의 내용부분
            <tr> // 행
            	<td>홍길동</td> // 셀
                <td>서울</td>
                <td>010-1111-2222</td>
            </tr>
        </tbody>
    </table>
    
    // 다른 곳으로 이동하는 a태그
    <a href="https://www.naver.com" target="_blank">네이버</a>
    
	<img width="400px" 
    src = "data:image/png;base64,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">

	<p class"color-primary" style="font-size:50px;"> 해드에 있는 .color-primary 가 적용됨 </p>
    <p class"color-primary font-50"> 해드에 있는 .color-primary와 .font-50이 적용됨 </p>

</body>


</html>

 

* 참고 사이트

https://www.w3schools.com/python/pandas/default.asp

 

Pandas Tutorial

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

 

 

 

CSS

 

전체 선택자(Universal Selector)

* {margin: 0; text-decoration: none;}

 

태그 선택자(Type Selector)

p {background: yellowgreen; color: darkgreen;}

 

클래스 선택자(Class Selector)

class1 {background: yellowgreen; color:darkgreen;}

 

ID 선택자(ID Selector)

#id1 {background: yellowgreen; color:darkgreen;}

 

하위 선택자(Descendant Combinator)

div ul {border: 1px; dotted black;}

 

자식 선택자(Child Selector)

div>ul {border: 1px; dotted black;}

 

 

 

저작자표시

'Front > HTTP, CSS, JavaScript' 카테고리의 다른 글

HTML, CSS - 짐코딩 (개발환경, Emmet, 글꼴태그, 목록태그, 표태그, Sementic태그)  (1) 2023.11.17
자바스크립트 기초 입문 강의 30분 - 조코딩  (0) 2023.11.16

'Front/HTTP, CSS, JavaScript'의 다른글

  • 현재글한시간 만에 끝나는 HTML , CSS

관련글

댓글

티스토리툴바