728x90

처음 부트스트랩을 쓰면서 가장 당황했던게 

css가 적용이 안되는 것이었다. 이틀 꼬박을 헤맸다.

공홈을 몇번을 읽었는데 무슨 소리인지 모르겠어서 환자할 것 같았다.

글을 보는 초보분이 있다면 저와 같은 당황스러움과 시간낭비 없이 효과적으로 빠르게 해결되기를 바란다

 

기존 html에 css를 적용할 때 선택자(selector) 중에 id와 class선택자를 이용해보자. 가장 쉽고 간단하다.

html의 어떤 태그에 id와 class 속성을 넣고 안에 속성값으로 원하는 이름을 지어줬으면 

얘들 이름을 호명하고 css를 적용시키는 방식이다.

여기까지는 부트스트랩도 같지만 내가 헤맸던 건 부트스트랩을 적용한 html 어디에 넣어서 적용해야할지를 몰랐던 것이다.

당황스럽게도 태그 안 속성 class="" 안에 지정해주는 것이다. 아래는 나의 진행 중인 프로젝트 파일 css이다

 

 

아래처럼 class선택자를 사용하여 class 속성값 "" 안에  클래스명을 지정하면 css가 먹힌다

주의할 점은 태그 마다 먹히는 css가 있고 아니니 부딪혀보자

백그라운드 컬러가 안먹힌다던가 볼드만 먹힌다던가 등등 이런식이다

ㅂ

 

728x90
반응형
저작자표시

'웹 관련 > Bootstrap' 카테고리의 다른 글

[Bootstrap] 페이지네이션(Pagination)  (0) 2022.05.02
728x90

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style>
	body{background-color:rgb(222,234,246);}
	form{background-color:rgb(237,237,237);}
	fieldset{border:none; padding:50px;}
	input{background-color:rgb(237,237,237); border:none; border-bottom-style:dashed; width:100px;}
	div{margin-top: 150px; margin-bottom: 150px; }	/*margin-top: 100px; margin-bottom: 100px;   */
	label{display:inline-block; width:150px; text-align:left;}
	span{display:block; padding-left:150px; font-size:15px;} /*블록안에 있으면서 블록 다 차지하게끔. 디브 움직이면 다 같이 움직이니 스팬으로 블록으로 지정해서 얼라인지정 할 수 있게해서 따로 움직일 수 있도록  */
	#button{background-color:rgb(197,224,181); border:none; width:450px; padding:20px; border-radius:10px;} /* border-radius 설정 */
</style>

</head>
<body>
 
	<form>
		<fieldset>
			<div> 
				<label>아이디 : </label><input type="text" id="userId" name="userId" onblur="requirement1()"> <!-- 위에 포커스 안맞춰지면 out시키겠다. 이벤트 발생안시키겠다 태그 위에 안맞춰지면 --> 
				<br><span id="checkId"></span>
			</div>
			<div>
				<label>패스워드 : </label><input type="password" id="userPwd" name="userPwd" onblur="requirement2()"> <!-- onfocus to onblur -->
				<br><span id="checkPwd"></span>
			</div>
			<div>
				<label>패스워드 확인 : </label><input type="password" id="userPwdConf" name="userPwd" onblur="requirement3()">
				<br><span id="checkPwdConf"></span>
			</div>
			<div>
				<label>이메일: </label>
				 <input type="text" class="userEmail" name="userEmail">
				@<input type="text" class="userEmail" name="userEmail">
				
			</div>
			<div>
				<label>주소 : </label><input type="text" id="userAddress">
			</div>
			<div>
			<button id="button" name="button">가입</button>
			</div>
		</fieldset>
	</form>
	<script>
	/* 영대소문자, 필수요구사항  */
		var userId = document.getElementById("userId");
		var checkId = document.getElementById("checkId");
		var userPwd = document.getElementById("userPwd");
		var checkPwd = document.getElementById("checkPwd");
		var userPwdConf = document.getElementById("userPwdConf");
		var checkPwdConf = document.getElementById("checkPwdConf");
		
		/* 영어 대/소문자 특수문자, 숫자 포함 8~32자*/
		document.getElementById("userPwd").addEventListener("click",capital);
		function capital(){
			checkPwd.innerText="영어 대/소문자 특수문자, 숫자 포함 8~32자";
		} 
		/* 필수요구사항 */
		function requirement1(){
			/* 비교할 것. 길이가 0또는 비어("")있냐.  */
			if(userId.value == "" || userId.value.length == 0){
				/* 유저가 아이디 안넣었을 때 */
				checkId.innerText="필수 입력 항목입니다";		
				userId.focus(); /* 내장객체 포커스 */
				return false; /* 아디 안넣었을 때 다른거 못쓰게 막아주는 false 리턴 */
			}else{
				/* 유저가 아이디 넣을때 */				
				checkId.innerText="";
				return true; /* 아디를 넣었을 때  true해서 비번 계속 쓸 수 허용, 넘겨주는 것*/
			}
		}
		function requirement2(){
			/* 비교할 것. 길이가 0또는 비어("")있냐.  */
			if(userPwd.value == "" || userPwd.value.length == 0){
				/* 유저가 아이디 안넣었을 때 */
				checkPwd.innerText="필수 입력 항목입니다";		
				userPwd.focus(); 
				return false; 
			}else{
				/* 유저가 아이디 넣을때 */				
				checkPwd.innerText="";
				return true; 
			}
		}
		function requirement3(){
			/* 비교할 것. 길이가 0또는 비어("")있냐.  */
			if(userPwdConf.value == "" || userPwdConf.value.length == 0){
				/* 유저가 아이디 안넣었을 때 */
				checkPwdConf.innerText="필수 입력 항목입니다";		
				userPwdConf.focus(); 
				return false; 
			}else{
				/* 유저가 아이디 넣을때 */				
				checkPwdConf.innerText="";
				return true; 
			}
		}
		
		
	</script>

<!-- 
인라인으로 넣으면 할당된 공간에서만 움직일 수 있어서 정렬 같은게 안먹힘. 인라인은 text-align이 안됨
	- span,
블록요소는 한줄 전체라 공간 제약이 없어서 width height를 다룰 수 있음 

위치선정을 할려면 인라인이 요소라서 정렬할려면 id로 

블록이면 줄바꿈도 적용
 -->
 

</body>
</html>

 

 

728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일1코딩][JS] 배열(Array) & 배열의 메소드  (0) 2022.04.23
[1일1코딩][bootstrap] 시범사용 & 연결  (0) 2022.04.22
[1일1코딩][Servlet] 서버 연결 - java class, html  (0) 2022.04.20
[1일1코딩][Servlet] 서버 연결 - web.xml, index.html 세팅  (0) 2022.04.19
[1일1코딩][jQuery] mouseenter & mouserout + attr  (0) 2022.04.19
728x90

 

아래의 화면 구현해보기

 

 

CSS

@charset "UTF-8";


.char2_1{ display: inline-block; width: 50px; height: 25px; line-height: default; text-align: center; 
          font-size: 12px; font-weight: bold;}

.char2_2{ display: inline-block; width:50px; height: 100px; line-height: 5; text-align: center; vertical-align: text-bottom; resize:none;
         font-size: 12px; font-weight: bold;}

.char4{ display: inline-block; padding: 0px; width: 50px; font-size: 12px; font-weight: bold;}

.submitBtn{padding-left: 80px}


#t1_top{background-color: #FFA07A; color: #fff;
        font-size: 11px;}

      
.contents{background-color: lightyellow;
          font-size: 10px; font-weight: 500;}
#t1_mid{width: 300px;}
            
.t1_btn_shortcut{width: 75px;}

#t1_bottom{background-color: #FFA07A; color: #fff;  text-align: center; 
           font-size: 11px; font-weight: bold;}

 

 

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UI디자인 포트폴리오</title>

<link href="css/portfolio.css" rel="stylesheet">

</head>
<body>
	


	<form action='insert.no' method='post'>
	<fieldset style="width: 570px; height: 255px;">
		<legend>공지사항 작성하기</legend>
		
		<label>
			<span class="char2_1">제목</span>
			<input name="title" type="text" placeholder="제목을 입력하시오." required><br>
				    
		</label>

		<label>
			<span class="char2_2">내용</span>
			<textarea name="content" rows="8" cols="23" placeholder="내용을 입력하시오." required
				  ></textarea><br>
		</label>
		
		<label>
			<span class="char4">첨부파일</span>
		
		<input type="file" name="uploadFile" multiple accept=".png, .jpg, .jpeg, .mp3, .mp4, .avi" style="font-size: 12px;">
		<!-- type="file파일 자체가 선택된 파일 없음 글씨까지 보여줌" -->
		</label>
		<br><br>
		

		<div class="submitBtn">
				<input type="button" value="작성하기">
		</div>
	</fieldset>
	</form>



	<br>
	<hr style="display: inline-block; text-align: left; width: 600px;"  >
	<br>
	

	<table border="1" width="600px" height="200px">
		<thead id="t1_top">
			<th width="25px">번호</th>
			<th width="410px" colspan="2" >제목</th>
			<th width="65px">작성자</th>
			<th width="65px">작성일</th>
			<th width="35px">조회수</th>
		</thead>
		<tbody class="contents">
			<tr>
				<td>9</td>
				<td id="t1_mid">공지사항 제목 9</td>
				<td><button class="t1_btn_shortcut">바로가기</button></td>
				<td>user01</td>
				<td>2021-03-29</td>
				<td>34</td>
			</tr>
			<tr>
				<td>6</td>
				<td>공지사항 제목 6</td>
				<td><button class="t1_btn_shortcut">바로가기</button></td>
				<td>answ445</td>
				<td>2021-03-12</td>
				<td>67</td>
			</tr>
			<tr>
				<td>3</td>
				<td>공지사항 제목 3</td>
				<td><button class="t1_btn_shortcut">바로가기</button></td>
				<td>testg12</td>
				<td>2021-03-01</td>
				<td>98</td>
			</tr>
			<tr>
				<td>2</td>
				<td>공지사항 제목 2</td>
				<td><button class="t1_btn_shortcut">바로가기</button></td>
				<td>palwe3</td>
				<td>2021-01-02</td>
				<td>85</td>
			</tr>
			<tr>
				<td>1</td>
				<td>공지사항 제목 1</td>
				<td><button class="t1_btn_shortcut">바로가기</button></td>
				<td>xm123</td>
				<td>2020-12-24</td>
				<td>124</td>
			</tr>
		</tbody>
		<tfoot id="t1_bottom">
			<tr>
				<td colspan="4" width="500px">전체공지사항 갯수</td>
				<td colspan="2" width="100px">5개</td>
			</tr>
		</tfoot>
		
	
	
	</table>
	

</body>
</html>

 

 

728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일1코딩][JS] 선언적 함수, 익명함수, 함수 전달인자와 매개변수 여러 방법  (0) 2022.04.17
[1일1코딩][jQuery] 연결 방식4가지, 선택자 6가지  (0) 2022.04.16
[1일1코딩][JS] for in문  (0) 2022.04.14
[1일1코딩][JS] 데이터입출력, HTML태그에 접근하기  (0) 2022.04.13
[1일1코딩][JS] 전역변수&지역변수, 데이터타입,형변환,for in문  (0) 2022.04.12
728x90

 

web1-8. 통계에 기반한 학습

html에 150개 이상의 태그가 존재하나 다 외울 필요 없이, 주요 몇개와 이해만 있다면 검색으로 모두 가능

 

<strong>,<u>,<h1-6>  이미 8가지 태그를 알고있음

 

html 사용 빈도수

 

 

web1-9. 줄바꿈 : br vs p

CSS맛보기

가독성을 위한 줄바꿈 필요 - 검색해보기 : html new line tag

<br> : 줄바꿈, 시각적 효과만 존재, 닫는 태그없음

<p></p>: 단락 나누는 태그.

*위의 두 태그는 시각적으로 같지만, p태그를 쓰는게 더 좋다. 웹페이지를 더 정보있는 가치로 만들어줌. 단락을 표현하므로 의미 있게 만듬

 

 *둘의 차이

<p>는 정해진 여백이 있어 제한이 있으나 css로 정교하게 스타일링가능.

<br>는 원하는 만큼 써서 공백을 만들 수 있음

<p style="margin-top:45px;">

margin 태그!

 

 

 

 

 

web1-10. html이 중요한 이유

 

인터넷 글쓰는 쓰는 것은 내부적으로 html코드를 작성하는 행위였음

편집기에서 h3태그로 감싼 글자와 볼드,글자크기를 조정한 시각적인 효과만 있는 글씨와는 검색시에 엄청난 차이가 난다

 

검색에서 유리한 태그들로 우선 구성해라

검색엔진들은 인터넷에서 수천수만의 검색어 관련 자료를 분석하는데 위의 h태그인 것과 아닌 것은 검색 우선순위에서 엄청난 차이가난다. 검색은 되지만 100-200페이지 뒤에 나온다면 누가볼까?

시각장애인을 위한 배려도 태그를 알면 가능!

 

 

 

728x90
반응형
저작자표시

'웹 관련 > └생활코딩 WEB1' 카테고리의 다른 글

생활코딩 WEB1 : 19-19.3  (0) 2021.12.17
생활코딩 WEB1 : 17-18  (0) 2021.12.12
생활코딩 WEB1 : 14-16  (0) 2021.12.12
생활코딩 WEB1 : 11-13  (0) 2021.11.09
생활코딩 WEB1 : 01-07  (0) 2021.11.06
728x90

 

 

web1-4. 코딩과  HTML

웹페이지

웹사이트 : 웹페이지가 모이면 웹사이트

 

웹페이지 만드는 언어가 html

 

Html 장점

가장 쉽다

많이 쓴다

퍼블릭 도메인이다(저작권 없음, 무료)

 

 

 

web1-5. html코딩과 실습환경준비

편집하는 프로그램이라는 의미로 에디터 프로그램

아톰(ATOM) 사용

웹페이지 확장자 : html

 - ex) first.html

hello web 첫 웹페이지 제작

 

 

web1-6. 기본문법 태그

웹을 지배하는 문법 : 태그

 

tag는 설명하는 것

 

컴퓨터용어들을 지을 때 일상에 밀접한 용어들로 짓는 경우가 많으니 모르겠으면 사전 찾아볼 것!

 

 <strong></strong> 태그 : 볼트체

 <u></u> 태그 : 언더라인, underline의 약자, <strong>태그 안에 사용가능

 

 

 

 

web1-7. 혁명적인 변화

쉬운 것은 사소하다? 시험의 목적은 구별이기에 틀린만한 것(어려운것)이 출제되므로, 각종 시험에 익숙해져 어려운 것만 가치가 있다고 자연스럽게 생각하게 된다

but, 기초 기본이 중요!!

                                                                                                          

w3c 싸이트

우클릭 페이지소스 : 웹페이지가 어떤 코드로 구성되어 있는지 볼 수 있음

 

<h1> : 제목. heading의 약자

<h1-6> : 1-6까지만 존재

  - h1 tag 사용시 자동적으로 볼트와 줄바꿈, 글씨크기가 커짐. 따로 다른 코드 안써도

 

HTML h1 tag 검색해보라

태그가 무엇인지만 알아도 검색으로 금방 알 수 있기에 모두 기억할 필요x

 

 

728x90
반응형
저작자표시

'웹 관련 > └생활코딩 WEB1' 카테고리의 다른 글

생활코딩 WEB1 : 19-19.3  (0) 2021.12.17
생활코딩 WEB1 : 17-18  (0) 2021.12.12
생활코딩 WEB1 : 14-16  (0) 2021.12.12
생활코딩 WEB1 : 11-13  (0) 2021.11.09
생활코딩 WEB1 : 08-10  (0) 2021.11.08

+ Recent posts

티스토리툴바