본문 바로가기
학교 & 학원 이론 수업/네이버 클라우드 AIaaS 개발자 양성 과정

2023.02.03 금요일 - HTML, CSS

kwohyuno 2023. 2. 3. 17:17

(수업 일정)

2.3(금) ~ 4.14(금) : 총 10주

      html, css, javascript, jQuery (3주) : visual studio  

      java (2주) : eclipse 

      Database(oracle, mysql) (1주)

      servlet & JSP (1~2주) : eclipse 

      SpringBoot(2~3주) 

2.10 특강 네이버 클라우드 강의장 (오전 4시간) / 오후 4시간 수업 

4.17 (월) ~ 4.21 (금 )  1주 : 리눅스 (외부강사)

4.24 ~ 5.30 (5주) 

      mini project (3주)  / aws 공부해서 DB 활용 

      리액트 기초 (2주) - visual studio & Spring Boot   /  cf. Node.js  

5.31 특강 외부강사 

6.1 ~ 6.9 네이버 클라우드 NCP 1주 : 외부강사 

6.5 수업 없는 날 

6.12 ~ 6.21 : 클라우드 및 리액트 고급 

6.22 ~ 8.1 : 6주

      파이썬, 인공지능 서비스 

      파이널 프로젝트 (리액트, 스프링부트)

8.2 파이널 프로젝트 발표 

 

----------------------------------------------------------------

 

HTML, CSS, JavaScript  

 

HTML 태그

<p>

<b>

<u>

<br>

<div>

<h1>

<pre>

<span>

 

자주 사용하는 특수문자

&nbsp;

&lt;

&gt;

 

 

주석

/* 

*/

 

 

파일 주소 호출 

(상위 폴더 호출 ) ..

(현재 폴더 호출) .

 

 

CSS 삽입법 3가지

----------------------------------------------------------------

코드 연습 및 출력 화면

 

Ex1_tag.html

 

 

 

 

Ex2_tag.html

 

 

 

Ex3_image.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        figure{
            float: left;    /*가로 방향 정렬, 나중에 해제 clear:both */
        }
        /*  >  바로 아래의 하위태그를 의미, 공백: 모든 하위태그*/
        figure>img{
            width: 100px;
            height: 100px;
            border-radius: 100px; /*모서리를 둥글게*/
        }
        /* figure>figcaption>b{ */
        figure b{    
            font-family: '궁서체';
            color: cadetblue;
        }
        /*제목을 가운데로 보내기*/
        figure>figcaption{
            text-align: center;
        }
        h2{
            font-family: 'Gamja Flower';
            /*글자색을 배경색을 변경해보자*/
            color: #2e8b57; /*16진수로 표현*/
            /* background-color: rgb(206,176,196); rgb는 0~255사이의 값 */
            background-color: rgba(206, 176, 196, 0.8);  /*마지막 alpha값은 0~1*/
        }
    </style>
</head>
<body>
<h2>이미지 아래 이름을 넣어보자</h2>
<img src="../photo/1.jpg" width="130" border="1">
<img src="../photo/2.jpg" width="130" border="1">
<img src="../photo/3.jpg" width="130" border="1">
<br>
<b style="margin-left: 40px;">샌드위치</b>
<b style="margin-left: 60px;">꼬치구이</b>
<b style="margin-left: 60px;">육개장</b>
<hr>
<h2> 이미지와 라벨을 세트로 넣어보자</h2>
<figure>
    <img src="../photo/11.jpg" width="130">
    <figcaption>
        <b>망고 빙수</b>
    </figcaption>
</figure>

<figure>
    <img src="../photo/12.jpg" width="130">
    <figcaption>
        <b>샌드위치</b>
    </figcaption>
</figure>

<figure>
    <img src="../photo/5.jpg" width="130">
    <figcaption>
        <b>콘치즈</b>
    </figcaption>
</figure>
</body>
</html>

 

'학교 & 학원 이론 수업 > 네이버 클라우드 AIaaS 개발자 양성 과정' 카테고리의 다른 글

2023.02.07 화요일 - CSS, HTML, JavaScript  (0) 2023.02.07
2023.02.06 월요일 - CSS, HTML, JavaScript  (0) 2023.02.06
사전교육 3일차 (2023.02.02)  (0) 2023.02.02
사전교육 2일차 (2023.02.01)  (0) 2023.02.01
사전교육 1일차 (2023.01.31)  (0) 2023.01.31

'학교 & 학원 이론 수업/네이버 클라우드 AIaaS 개발자 양성 과정' Related Articles

티스토리툴바