Skip to content

Commit

Permalink
real final css commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@yeochaeeon
yeochaeeon committed Jun 27, 2024
1 parent 9b91e85 commit 1d85a83
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 107 deletions.
49 changes: 14 additions & 35 deletions 03_Css/prac.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
body {
background-color: rgb(227, 242, 255);
margin: 0px;
padding: 0px;
display: flex;
justify-items: center;
justify-content: center;
}
#content {
background-color: rgb(227, 242, 255);
justify-content: center;
}
img {
Expand Down Expand Up @@ -90,43 +95,17 @@ footer {
/* 미디어쿼리 */
/* 커졌을 때 header 를 flex로 준다 .. 1280이상 미디어쿼리 사용
작아졌을 때는 밑으로 내려오게 ( not flex) */
@media screen and (max-width: 1024px) {
a {
/* background-color: darkblue; */
}
body {
/* padding: 100px; */
@media screen and (min-width: 1280px) {
#content {
/* display: flex; */
justify-content: center;
/* width: 600px; */
}

/* body {
padding: 20px;
/* margin-left: 10%; */
/* 바디에 flex주면 10%수동으로 안해줘도 됨 */
width: 80%;
}
header {
flex-direction: column;
display: flex;
justify-content: space-between;
align-items: center;
height: auto;
}
header li {
margin: 5px 0;
}
section {
flex-direction: column;
align-items: center;
padding: 10px;
}
section img {
width: 80px;
height: 80px;
}
footer {
text-align: center;
} */
}
/* */
146 changes: 74 additions & 72 deletions 03_Css/prac.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,83 +15,85 @@
<link rel="stylesheet" type="text/css" href="./prac.css" />
</head>
<body>
<header>
<h1>AI 빅데이터분석 풀스택서비스 SW 개발자 양성과정</h1>
<!-- <div>소프트웨어 융합기초</div> -->
<!-- vscode 주석 단축키 == 'ctrl + /' -->
<ul>
<!-- 메뉴목록 -->
<!-- ul 안에는 li가 들어가야함 -->
<li><a href="#d1">HTML</a></li>
<li><a href="#d2">CSS</a></li>
<li><a href="#d3">JavaScript</a></li>
<li><a href="#d4">React</a></li>
<li><a href="">Facebook</a></li>
<li><a href="">Instagram</a></li>
</ul>
</header>
<main>
<!-- 인라인 스타일 -->
<!-- <article style="background-color: beige; color: brown"> -->
<article>
<h1>프론트엔드 FrontEnd</h1>
<p>
웹에서 사용자에게 시각적으로 보여지는 부분을 의미한다.
프론트엔드쪽에서는 주로 HTML, CSS, 자바스크립트가 쓰이며, 요즘은
페이스북에서 개발한 자바스크립트에서 파생된 싱글 페이지 애플리케이션
형태의 리액트가 많이 사용된다.
</p>
</article>
<section id="d1" class="c1">
<h2>HTML</h2>
<!-- img 는 src속성을 가져야한다 -->
<div>
<img src="./img/html.png" alt="html" />
<!-- 절대경로를 절대 쓰면 안됨 ㅋㅋ -->
<div id="content">
<header>
<h1>AI 빅데이터분석 풀스택서비스 SW 개발자 양성과정</h1>
<!-- <div>소프트웨어 융합기초</div> -->
<!-- vscode 주석 단축키 == 'ctrl + /' -->
<ul>
<!-- 메뉴목록 -->
<!-- ul 안에는 li가 들어가야함 -->
<li><a href="#d1">HTML</a></li>
<li><a href="#d2">CSS</a></li>
<li><a href="#d3">JavaScript</a></li>
<li><a href="#d4">React</a></li>
<li><a href="">Facebook</a></li>
<li><a href="">Instagram</a></li>
</ul>
</header>
<main>
<!-- 인라인 스타일 -->
<!-- <article style="background-color: beige; color: brown"> -->
<article>
<h1>프론트엔드 FrontEnd</h1>
<p>
HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성
요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용
웹에서 사용자에게 시각적으로 보여지는 부분을 의미한다.
프론트엔드쪽에서는 주로 HTML, CSS, 자바스크립트가 쓰이며, 요즘은
페이스북에서 개발한 자바스크립트에서 파생된 싱글 페이지 애플리케이션
형태의 리액트가 많이 사용된다.
</p>
</div>
</section>
</article>
<section id="d1" class="c1">
<h2>HTML</h2>
<!-- img 는 src속성을 가져야한다 -->
<div>
<img src="./img/html.png" alt="html" />
<!-- 절대경로를 절대 쓰면 안됨 ㅋㅋ -->
<p>
HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성
요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용
</p>
</div>
</section>

<section id="d2" class="c2">
<h2>CSS</h2>
<div>
<img src="./img/css.png" alt="css" />
<p>
Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML
포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어
</p>
</div>
</section>
<section id="d2" class="c2">
<h2>CSS</h2>
<div>
<img src="./img/css.png" alt="css" />
<p>
Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML
포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어
</p>
</div>
</section>

<section id="d3" class="c1">
<h2>JavaScript</h2>
<div>
<img src="./img/js.png" alt="js" />
<p>
웹 페이지를 위한 스크립트 언어로 가벼운, 인터프리터 혹은
just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원
</p>
</div>
</section>
<section id="d3" class="c1">
<h2>JavaScript</h2>
<div>
<img src="./img/js.png" alt="js" />
<p>
웹 페이지를 위한 스크립트 언어로 가벼운, 인터프리터 혹은
just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원
</p>
</div>
</section>

<section id="d4" class="c2">
<h2>React</h2>
<div>
<img src="./img/react.png" alt="react" />
<p>사용자 인터페이스를 만들기 위한 JavaScript 라이브러리</p>
</div>
</section>
<section id="d4" class="c2">
<h2>React</h2>
<div>
<img src="./img/react.png" alt="react" />
<p>사용자 인터페이스를 만들기 위한 JavaScript 라이브러리</p>
</div>
</section>

<footer>
AI 빅데이터분석 풀스택서비스 SW 개발자 양성과정 <br />웹개발,
자바/자료구조/AI 프로그래밍, DB SQL, 빅데이터분석, 텐서플로딥러닝,
AI학습모델웹서비스프로젝트, 빅데이터분석웹서비스프로젝트
<br /><br />부산대학교 과학기술연구동 4층 401호 [email protected]
051-510-3764
</footer>
</main>
<footer>
AI 빅데이터분석 풀스택서비스 SW 개발자 양성과정 <br />웹개발,
자바/자료구조/AI 프로그래밍, DB SQL, 빅데이터분석, 텐서플로딥러닝,
AI학습모델웹서비스프로젝트, 빅데이터분석웹서비스프로젝트
<br /><br />부산대학교 과학기술연구동 4층 401호 [email protected]
051-510-3764
</footer>
</main>
</div>
</body>
</html>

0 comments on commit 1d85a83

Please sign in to comment.